[英]Options of dropdown created using javascript array is not visible in IE
首次加载页面时，下拉选项不可见。
详细来说-
工作原理--->我创建了许多下拉列表。 在第一个下拉菜单更改选项时，其余的下拉菜单会删除所选选项。 然后，在第二个下拉菜单的选项更改之后，下拉菜单的其余部分再次删除所选选项。 相同的过程将再次进行，直到最后一个下拉列表。
问题->在google crome中工作正常，但在IE加载页面时，在任何下拉列表中均未显示任何选项。 一旦选择了一个选项，则该选项的其余部分才可见。 这就是问题。 我希望onload下拉菜单中的选项应该可见，但是以某种方式在IE中不起作用
提前致谢 ：）
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<script>
function addlist1(element1, selected_element) {
var select1 = document.getElementById(element1);
var newOpt = ["ONE", "TWO", "THREE", "FOUR", "FIVE"];
var newopt1 ;
var newopt2 ;
if(selected_element == 'mySelect' || selected_element == 'mySelect1' || selected_element == 'mySelect2'
|| selected_element == 'mySelect3'|| selected_element == 'mySelect4' || selected_element == 'mySelect5'){
var sel = document.getElementById('mySelect');
newopt1 = newOpt.slice(0, sel.selectedIndex);
newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
newOpt = newopt1.concat(newopt2);
if(selected_element == 'mySelect1' || selected_element == 'mySelect2'|| selected_element == 'mySelect3'
|| selected_element == 'mySelect4' || selected_element == 'mySelect5'){
var sel = document.getElementById('mySelect1');
newopt1 = newOpt.slice(0, sel.selectedIndex);
newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
newOpt = newopt1.concat(newopt2);
if(selected_element == 'mySelect2'|| selected_element == 'mySelect3'
|| selected_element == 'mySelect4' || selected_element == 'mySelect5'){
var sel = document.getElementById('mySelect2');
newopt1 = newOpt.slice(0, sel.selectedIndex);
newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
newOpt = newopt1.concat(newopt2);
if(selected_element == 'mySelect3'|| selected_element == 'mySelect4'
|| selected_element == 'mySelect5'){
var sel = document.getElementById('mySelect3');
newopt1 = newOpt.slice(0, sel.selectedIndex);
newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
newOpt = newopt1.concat(newopt2);
if( selected_element == 'mySelect4' || selected_element == 'mySelect5'){
var sel = document.getElementById('mySelect4');
newopt1 = newOpt.slice(0, sel.selectedIndex);
newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
newOpt = newopt1.concat(newopt2);
if(selected_element == 'mySelect5'){
var sel = document.getElementById('mySelect5');
newopt1 = newOpt.slice(0, sel.selectedIndex);
newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
newOpt = newopt1.concat(newopt2);
}
}
}
}
}
}
for(var i = 0; i < newOpt.length; i++) {
var opt = newOpt[i];
select1.options[i].value = opt.valueOf();
select1.options[i].text = opt.valueOf();
}
}
function createList() {
alert('onload');
var select = document.getElementById("mySelect");
var select1 = document.getElementById("mySelect1");
var select2 = document.getElementById("mySelect2");
var select3 = document.getElementById("mySelect3");
var select4 = document.getElementById("mySelect4");
var select5 = document.getElementById("mySelect5");
var options = ["ONE", "TWO", "THREE", "FOUR", "FIVE"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select1.appendChild(el);
}
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select2.appendChild(el);
}
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select3.appendChild(el);
}
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select4.appendChild(el);
}
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select5.appendChild(el);
}
}
function removelist(element_id) {
alert('remove');
var selected_element = element_id.id;
alert(selected_element);
var e0 = document.getElementById("mySelect");
var e1 = document.getElementById("mySelect1");
var e2 = document.getElementById("mySelect2");
var e3 = document.getElementById("mySelect3");
var e4 = document.getElementById("mySelect4");
var e5 = document.getElementById("mySelect5");
if(selected_element == 'mySelect'){
addlist1("mySelect1", selected_element);
addlist1("mySelect2", selected_element);
addlist1("mySelect3", selected_element);
addlist1("mySelect4", selected_element);
addlist1("mySelect5", selected_element);
e1.remove(4);
e2.remove(4);
e3.remove(4);
e4.remove(4);
e5.remove(4);
} else if(selected_element == 'mySelect1'){
addlist1("mySelect2", selected_element);
addlist1("mySelect3", selected_element);
addlist1("mySelect4", selected_element);
addlist1("mySelect5", selected_element);
e2.remove(4);
e2.remove(3);
e3.remove(4);
e3.remove(3);
e4.remove(4);
e4.remove(3);
e5.remove(4);
e5.remove(3);
} else if(selected_element == 'mySelect2'){
addlist1("mySelect3", selected_element);
addlist1("mySelect4", selected_element);
addlist1("mySelect5", selected_element);
e3.remove(4);
e3.remove(3);
e3.remove(2);
e4.remove(4);
e4.remove(3);
e4.remove(2);
e5.remove(4);
e5.remove(3);
e5.remove(2);
} else if(selected_element == 'mySelect3'){
addlist1("mySelect4", selected_element);
addlist1("mySelect5", selected_element);
e4.remove(4);
e4.remove(3);
e4.remove(2);
e4.remove(1);
e5.remove(4);
e5.remove(3);
e5.remove(2);
e5.remove(1);
} else if(selected_element == 'mySelect4'){
addlist1("mySelect5", selected_element);
e5.remove(5);
e5.remove(4);
e5.remove(3);
e5.remove(2);
e5.remove(1);
}
}
</script>
<body onload ="createList()">
<form id="mainForm" action= "" method ="get">
Criteria One:
<select id="mySelect" onchange="removelist(this)">
</select>
<select id="mySelect1" onchange="removelist(this)">
</select>
<select id="mySelect2" onchange="removelist(this)">
</select>
<select id="mySelect3" onchange="removelist(this)">
</select>
<select id="mySelect4" onchange="removelist(this)">
</select>
<select id="mySelect5">
</select>
</form>
</body>
</html>
我首先尝试通过不使用ID，而是使用节点本身来使您的代码更具可维护性。 这样，您不必为每个选择重复执行代码。 但是，我确实为其分配了ID，以供以后处理。 我不知道它做了什么，但是如果您从左到右选择它，它在IE中对我有用：
var selects = [], numOfSelects = 6, options = ["ONE", "TWO", "THREE", "FOUR", "FIVE"]; window.addEventListener('DOMContentLoaded', createList, false); function createList() { var form = document.getElementById("mainForm"); for(var i = 0; i < numOfSelects; i++){ var select = document.createElement('select'); select.id = "mySelect" + i; selects.push(select); selects[i].addEventListener('change', removeList, false); for (var j = 0, k = options.length; j < k; j++) { var el = document.createElement("option"); el.textContent = el.value = options[j]; selects[i].appendChild(el); } form.appendChild(select); } } function removeList(ev) { var el = ev.currentTarget, value = el.value; for(var i = 0, l = selects.length; i<l; i++){ if(selects[i].isSameNode(el)){continue;} var options = selects[i].childNodes; for(var j = 0, k = options.length; j < k; j++){ if(options[j].value == value){ selects[i].remove(j); j--;k--; } } } }
<form id="mainForm" action= "" method ="get"> Criteria One: </form>
使用JavaScript从PHP数组中填充带有选项的动态创建的下拉列表
[英]Populate Dynamically Created Dropdown with Options from PHP array using javascript
如何为在javascript函数中创建的下拉菜单提供多个选择选项
[英]how to give multiple select options for a dropdown created in javascript function
使用JavaScript在下拉菜单中显示选项的键和值
[英]Displaying key and values of the options in a dropdown using javascript
如何使用下拉列表选项删除数组的HTML（Javascript）
[英]How do I remove HTML of Array using dropdown list options(Javascript)
使用JavaScript填充的下拉列表在下拉选项中仅显示“未定义”
[英]Dropdown populated using javascript showing only 'Undefined' in the dropdown options
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.