HTML中的级联下拉列表



好的,我用下面的更新编辑了这个问题。

我试过使用下面的脚本,但似乎不起作用。请有人告诉我下面的代码有什么问题。

<script>
var myselect = document.getElementById("start2");
document.getElementById("end1").onchange = createOption()

function createOption() {
var selectEnd = document.getElementById("end1");
var value = selectEnd.options[select.selectedIndex].value;
var objOption = document.createElement("option");
objOption.text = value + 1;
objOption.value = value +1;
//myselect.add(objOption);
myselect.appendChild(objOption);
}
</script>

我想做的是有两个id为End1Start2的选择列表表单。我希望当选择列表End1onchange时,End1中的值将传递给Start2并添加1。但是,一切都没有发生。

我已经解决了这个问题。我想分享它。但是,我可以把它作为答案张贴在这里吗?或者我需要在上面的第一个条目中添加?

<html>
<body id="myBody">  
<table>
<%
for i = 1 to 5
%>
<tr>
<td>
<select id = "start<%=i%>" onChange="startChange(this.id)">
<option value=""></option>
</select>
</td>
<td>
<select id = "end<%=i%>" onChange="endChange(this.id)">
<option value=""></option>
</select>
</td>
</tr>
<%
next
%>
</table>
<script>        
const serialEnd =+document.getElementById("start1").innerText + 100;
document.getElementById("myBody").onload = function() {optionLoad("end1")};

function optionLoad(id){
var lastno = +id.substring(3,4);
var selectElement = document.getElementById("end" +  lastno + "");      
var serialStart = +document.getElementById("start" +  lastno + "").value;
for (var serial = serialStart + 1; serial <= serialEnd; serial++) {
selectElement.add(new Option(serial));
}   
}
function endChange(id) {
var lastno = +id.substring(3,4);
var selectStart = document.getElementById("start" + ( lastno + 1 ) + "");
var selectEnd = document.getElementById(id);
var options = selectEnd.options[selectEnd.selectedIndex];                       
var objOption = document.createElement("option");

if (lastno != 5){                           
removeOptions(document.getElementById("start" + ( lastno + 1 ) + ""));
objOption.text = +options.value + 1;
objOption.value = +options.value + 1;
selectStart.add(objOption);         
}
}
function startChange(id){
var lastno = +id.substring(5,6);        
removeOptions(document.getElementById("end" + lastno + ""));            
optionLoad("end" + lastno + "");
}

function removeOptions(selectElement) {
var i, L = selectElement.options.length - 1;
for(i = L; i >= 1; i--) {
selectElement.remove(i);
}
}
</script>
</body>
</html>

最新更新