使用 javascript 数组创建的下拉列表选项在 IE 中不可见
Options of dropdown created using javascript array is not visible in IE
首次
加载页面时，下拉选项不可见。
详细内容——
它是如何工作的--->我已经创建了多个下拉列表。在第一个下拉列表的选项更改上，下拉列表的其余部分将删除所选选项。并在第二个下拉列表的选项更改时，下拉列表的其余部分再次删除选定的选项。相同的过程再次进行，直到最后一个下拉列表。
问题-->这在谷歌crome中工作正常，但在IE中加载页面时，任何下拉列表中都没有可见的选项。一旦选择了某个选项，则只有在该选项的其余部分可见之后。这就是问题所在。我也想要加载下拉列表中的选项应该是可见的，但不知何故在 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在Webkit/FF中有效，但在IE中无效
- ng-单击在IE中不起作用的选项选择Angularjs
- 在 IE 中从 DOM 中删除选项时，滚动选择元素会跳到顶部
- Javascript变量在IE中不起作用||用Javascript隐藏选项
- JQuery隐藏选项没有'我在IE 11中不工作
- window.打开IE 11中的新选项卡而不是新窗口
- 无法在 IE 中设置选项元素的属性
- Selenium IE Driver 打开新窗口，而不是 window.open(） 上的新选项卡
- 在IE浏览器中选择不更改的选项
- 在 IE 中隐藏选项标记
- 为什么选择只显示IE 9中选项文本的第一个字符
- 带有JavaScript的选项卡在IE中不起作用
- 无法使用 jquery 在 IE 中取消选择多个选项
- 工具提示器悬停选择和选项在IE中不起作用
- <选项> 禁用属性在 IE 之前的版本 8 中不受支持.任何解决方法
- javascript:window.close(）;不会关闭 IE 8 中的选项卡
- 在 IE 11 中<选项>标记上，Onclick 事件不起作用
- Windows 7 IE*-选项卡未在winxp中加载数据;It’很好
- 查询单个ie选项卡的内存使用情况
- 离开IE选项卡的事件是什么?
