動態html表格

我正在處理動態表單。我有一個單選按鈕，如果用戶選擇一個單選按鈕，我想填充一個基於單選按鈕值的下拉菜單。動態html表格

例如。如果單選按鈕值= value1顯示3項（蘋果，香蕉，芒果）的下拉菜單

例如，如果單選按鈕值= value2顯示5項（蘋果，香蕉，芒果，杏，ornage）的下拉菜單

等我用CSS隱藏並顯示下拉菜單。（1）我遇到的問題是，當我在<table></table>中插入我的表單時，這是行不通的;當我刪除它的工作表標籤。它有點怪......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
<!-- 

function changeDiv(the_div,the_change) 
{ 
    var the_style = getStyleObject(the_div); 
    if (the_style != false) 
    { 
    the_style.display = the_change; 
    } 
} 

function hideAll() 
{ 
    changeDiv("main_category","none"); 
    changeDiv("another_category","none"); 
    changeDiv("other_category","none"); 
} 

function getStyleObject(objectId) { 
    if (document.getElementById && document.getElementById(objectId)) { 
    return document.getElementById(objectId).style; 
    } else if (document.all && document.all(objectId)) { 
    return document.all(objectId).style; 
    } else { 
    return false; 
    } 
} 
// --> 
</script> 
</head> 

<body> 
<table> 

<tr> 
    <td align="right" valign="top">Main Category:</td> 
    <td> 
    <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value1">value1<br /> 
    <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value2">value2<br /> 
    <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value3">value3<br /> 
    <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value4">value4 
    </td> 
</tr> 


<div id="main_category" style="margin-left:30px;display:none"> 
<tr> 
    <td align="right">Options:</td> 
    <td></td> 
</tr> 
</div> 

<tr> 
    <td align="right">Aanother Category:</td> 
    <td> 
    <input type="radio" name="another_cat" onClick="hideAll(); changeDiv('another_category','block');" value="Yes">Yes 
    <input type="radio" name="another_cat" value="No">No 
    </td> 
</tr> 


<div id="another_category" style="margin-left:30px;display:none;"> 
<tr> 
    <td align="right">Other Category:</td> 
    <td> 

    </td> 
</tr> 

<tr> 
    <td align="right">Interest:</td> 
    <td> 

    </td> 
</tr> 
</div> 





</table> 
</body> 
</html>

（2）第二個問題是，我有第二個單選按鈕這樣的：如。如果單選按鈕值= value1顯示3項（蘋果，香蕉，芒果）的下拉菜單例如。如果單選按鈕值= value2顯示5項（蘋果，香蕉，芒果，杏，ornage）等下拉菜單我已經使用CSS來隱藏和顯示下拉菜單。

現在的訣竅是，如果我已經選擇的值=值，我不想在第二個單選按鈕

任何幫助，再次顯示值1 /建議是極大的讚賞。

來源

2010-09-16 NULL

我在這裏插入一個代碼，但它不顯示，什麼是用於插入代碼的語法？ – NULL 2010-09-16 20:03:39

在代碼區域的每一行中的任何文本之前至少使用四個空格，並確保代碼塊前後有空行。 StackOverflow將負責其餘部分。 – StriplingWarrior 2010-09-16 20:06:52

要輕鬆插入代碼，您可以將其粘貼，選中它，然後按下'101010'按鈕，該按鈕將按照StriplingWarrior的建議自動縮進4個空格。 – 2010-09-16 20:09:18

試試這個

<html> 
    <head> 
     <script type="text/javascript"> 
        var comList= new Array("apple","banana","mango"); 
        var list = new Array("orage", "apricot"); 
        var val1selected = 0; 

      function loadDropDown(option){ 
         setSelectdVal(option) 
         createDropDown(option) 
        } 
       function setSelectdVal(option){ 
         if (option == 1){ 
          val1selected = 1; 
         } 
        }  

        function createDropDown(option){ 
         html = ""; 
         html = html + '<select id="id">' 
         var arr = getArray(option); 
         for (var i=arr.length-1; i>=0; --i){ 
          html = html + '<option value="' + i + '">' + arr[i] + '</option>' 
         } 
         html = html + '</select>' 
         document.getElementById('selectTag').innerHTML = html; 
      } 
        function getArray(option){ 
         var a = comList; 
         if ((option == 2) && (val1selected == 0)){ 
          a = comList.concat(list) 
         } 
         return a; 
        } 

       </script> 
    </head> 
     <body> 
     <table> 
        <tr> 
         <td><input type="radio" name="options" onClick=loadDropDown(1);>value1</td> 
         <td><input type="radio" name="options" onClick=loadDropDown(2);>value2</td> 
        </tr> 
      <tr> 
         <td></td> 
         <td id="selectTag"></td> 
        </tr> 
       </table> 
     </body> 
</html>

來源

2010-09-17 06:51:54 sameera207

完美！謝謝你的幫助 – NULL 2010-09-17 13:19:11

我建議看看一些Javascript框架，這會讓你的生活變得更容易。看看ExtJS：http://www.sencha.com/products/js/或jQuery：http://jquery.com/這些框架可以輕鬆處理您的問題。

來源

2010-09-16 19:54:00 sdavids

謝謝，我其實我有一個代碼，我添加了我的文章，但不知何故它沒有顯示。 – NULL 2010-09-16 19:58:31

動態html表格

回答

相關問題