动态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

回答

相关问题