如何生成多组下拉列表和文本类型输入字段(其中一组由 3 个下拉列表和 1 个输入类型 = 文本组成),基于它必须生成的次数是通过从另一个下拉列表中选择一个数字。
我的代码是这样的:
<!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>Add New Detail</title>
<link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>
<style type="text/css">
#main {
background-color:#0CF;
width:600px;
padding:25px 0;
}
#drop_box_set {
background:#666;
width:90%;
color:#FFF;
padding:25px 0;
}
</style>
<!------------------------------------------------------------------------------------------------>
<!--------------------------- CHANGE OPTIONS ON CHILD DROPDOWN SCRIPT ---------------------------->
<!------------------------------------------------------------------------------------------------>
<script type="text/javascript">
function setOptions(chosen, selbox) {
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
setTimeout(setOptions(' ',document.add_new_customer_form.optthree),5);
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('first choice - option one','11');
selbox.options[selbox.options.length] = new Option('first choice - option two','12');
setTimeout(setOptions('11',document.add_new_customer_form.optthree),5);
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','21');
selbox.options[selbox.options.length] = new Option('second choice - option two','22');
setTimeout(setOptions('21',document.add_new_customer_form.optthree),5);
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','31');
selbox.options[selbox.options.length] = new Option('third choice - option two','32');
setTimeout(setOptions('31',document.add_new_customer_form.optthree),5);
}
if (chosen == "11") {
selbox.options[selbox.options.length] = new Option('first choice - option one - sub one','111');
selbox.options[selbox.options.length] = new Option('first choice - option one - sub two','112');
}
if (chosen == "12") {
selbox.options[selbox.options.length] = new Option('first choice - option two - sub one','121');
selbox.options[selbox.options.length] = new Option('first choice - option two - sub two','122');
}
if (chosen == "21") {
selbox.options[selbox.options.length] = new Option('second choice - option one - sub one','211');
selbox.options[selbox.options.length] = new Option('second choice - option one - sub two','212');
}
if (chosen == "22") {
selbox.options[selbox.options.length] = new Option('second choice - option two - sub one','221');
selbox.options[selbox.options.length] = new Option('second choice - option two - sub two','222');
}
if (chosen == "31") {
selbox.options[selbox.options.length] = new Option('third choice - option one - sub one','311');
selbox.options[selbox.options.length] = new Option('third choice - option one - sub two','312');
}
if (chosen == "32") {
selbox.options[selbox.options.length] = new Option('third choice - option two - sub one','321');
selbox.options[selbox.options.length] = new Option('third choice - option two - sub two','322');
}
}
</script>
</head>
<body>
<div align="center"><!--DIV ALIGNMENT CENTER START-->
<div id="main"><!--DIV MAIN START-->
<form name="add_new_customer_form" method="post" action="">
<label class="description">Number Of Computer Devices : </label>
<select name="element_19" class="short_select">
<option value="" selected="selected"></option>
<option value="01" >01</option>
<option value="02" >02</option>
<option value="03" >03</option>
<option value="04" >04</option>
<option value="05" >05</option>
<option value="06" >06</option>
<option value="07" >07</option>
<option value="08" >08</option>
<option value="09" >09</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
</select>
<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Device Type : </label>
<select name="optone" class="element select medium" style="width:200px;" onchange="setOptions(document.add_new_customer_form.optone.options[document.add_new_customer_form.optone.selectedIndex].value,document.add_new_customer_form.opttwo);">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->
<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Device Brand : </label>
<select name="opttwo" class="element select medium" style="width:200px;" onchange="setOptions(document.add_new_customer_form.opttwo.options[document.add_new_customer_form.opttwo.selectedIndex].value,document.add_new_customer_form.optthree);">
<option value=" " selected="selected"></option>
</select>
</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->
<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Operating System : </label>
<select name="optthree" class="element select medium" style="width:200px;">
<option value=" " selected="selected"></option>
</select>
</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->
<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Serial Number : </label>
<input name="element_10" class="element text medium" type="text" maxlength="255" value=""/>
</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->
</form>
</div><!--DIV MAIN ENDS-->
</div><!--DIV ALIGNMENT CENTER ENDS-->
</body>
</html>
另外,这是我在寻找解决方案时遇到的jsFiddle的链接。
在上面的 jsFiddle 中,如果单击“添加”按钮,它会生成一组 02 下拉列表 + 01 type=text 输入字段和一个 REMOVE 按钮,以防某些生成的超出要求。
这正是我需要的,但不同的是我需要它是一个自动化的过程。
我需要的是(根据我的代码):
如果从“计算机设备数量”的第一个下拉列表中选择 05,它应该生成 05 组下拉框和 type=text 输入并删除按钮。
它应该生成 05 个集合,其中01 set = 03 dropdowns + 01 type=text
输入字段和删除按钮(如果生成的数量超过 requiremt)。