我正在研究动态表格。
我有一个单选按钮，如果用户选择了一个单选按钮，我想根据单选按钮的值填充一个下拉菜单。
例如。如果单选按钮value = value1显示3个项目的下拉菜单（苹果，香蕉，芒果）
例如。如果单选按钮的value = value2显示5个项目的下拉菜单（苹果，香蕉，芒果，杏，奥尔纳奇）
等。我已经使用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）第二个问题是，我有第二个单选按钮，如下所示：
例如。如果单选按钮value = value1显示3个项目的下拉菜单（苹果，香蕉，芒果）
例如。如果单选按钮value = value2显示5个项目的下拉菜单（苹果，香蕉，芒果，杏，杏仁）等。我使用CSS来隐藏和显示下拉菜单。
现在的诀窍是，如果我已经选择value = value1，我不想在第二个单选按钮中再次显示value1
任何帮助/建议，我们将不胜感激。
最佳答案
尝试这个
<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>
关于javascript - 动态HTML表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3730167/