显示:无;在“选择多个”中,在 IE 8 上不起作用
Display:none; in select multiple doesn't work on IE 8
我是新来的,是一名初级开发人员。我在IE8上有一个问题,我的代码在Firefox中工作正常,但在IE中根本不起作用。
我的代码中有 2 个选择多个,我想为第一个选项显示第二个选择的一些选项。
.HTML:
<form name="formMenu">
<table>
<tr>
<td align="center">
<select multiple name="selectOne" title="selectOne" class="selectOne"
style="width:180px;height:60px">
<option value="abc" onclick="Javascript:obtainSecondChoices()">
abc
</option>
<option value="def" onclick="Javascript:obtainSecondChoices()">
def
</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<select multiple name="selectTwo" title="selectTwo" class="selectTwo"
style="width:180px;height:60px">
<option class="abc" value="selTwoOpt1" style="display:none;">
selTwoOpt1
</option>
<option class="def" value="selTwoOpt2" style="display:none;">
selTwoOpt2
</option>
<option class="abc" value="selTwoOpt3" style="display:none;">
selTwoOpt3
</option>
</select>
</td>
</tr>
</table>
</form>
JavaSript:
function obtainSecondChoices(){
var fstSelects = document.formMenu.selectOne;
for(var i = 0 ; i < fstSelects.length; i++){
var fstSelect = fstSelects[i];
if(fstSelect.selected){
var scndSelects = document.formMenu.selectTwo;
for(var j = 0; j< scndSelects.length; j++){
if(scndSelects[j].className == fstSelect.value){
scndSelects[j].style.display = '';
}
}
} else {
var scndSelects = document.formMenu.selectTwo;
for(var j = 0; j< scndSelects.length; j++){
if(scndSelects[j].className == fstSelect.value){
scndSelects[j].style.display = 'none';
scndSelects[j].selected = false;
}
}
}
}
}
这应该显示或隐藏并取消选择第二个选项,具体取决于您在第一个选项中选择的内容。
正如我所说,它在 Firefox 中运行良好,但 Internet Explorer 最初甚至没有隐藏显示:无;
提前感谢,对不起我的英语不好。
请尝试以下代码: 使用临时Select
标签时,您的 HTML 几乎没有变化。
.HTML:
<form name="formMenu">
<table>
<tr>
<td align="center">
<select multiple="multiple" name="selectOne" title="selectOne" class="selectOne"
style="width: 180px; height: 60px" onchange="obtainSecondChoices()">
<option value="abc">abc </option>
<option value="def">def </option>
</select>
</td>
</tr>
<tr>
<td align="center">
<select multiple="multiple" name="selectTwo" title="selectTwo" class="selectTwo"
style="width: 180px; height: 60px">
</select>
<select name="selectTemp" id="selectTemp" style="display: none;">
<option class="abc" value="selTwoOpt1">selTwoOpt1 </option>
<option class="def" value="selTwoOpt2">selTwoOpt2 </option>
<option class="abc" value="selTwoOpt3">selTwoOpt3 </option>
</select>
</td>
</tr>
</table>
</form>
JavaScript :
<script type="text/javascript">
function obtainSecondChoices() {
var fstSelects = document.formMenu.selectOne;
var scndSelects = document.formMenu.selectTwo;
scndSelects.options.length = 0;
for (var i = 0; i < fstSelects.length; i++) {
var fstSelect = fstSelects[i];
if (fstSelect.selected) {
var tempSelects = document.formMenu.selectTemp;
for (var j = 0; j < tempSelects.length; j++) {
if (tempSelects[j].className == fstSelect.value) {
scndSelects.options[scndSelects.options.length] = new Option(tempSelects[j].text, tempSelects[j].value);
}
}
}
}
}
</script>
而不是
scndSelects[j].style.display = 'none';
scndSelects[j].selected = false;
用
var ddl = document.getElementById('scndSelects');
var i;
i= 5 // no. of option you want to remove
ddl.remove(i);
相关文章:
- 从手机中选择多个图像'使用phonegap的多媒体资料
- 如何选择多个输入字段并删除所需的属性
- 选择多个实例中的第一个
- AngularJS中没有选择多个单选按钮
- 在JS的下拉列表中选择多个输入参数
- 如何在一个onclick按钮上使用一个javascript函数选择多个文本字段
- 从下拉列表中选择多个值并调用javaScript函数
- 在ajax中选择多个var
- AngularJS和UI-选择多个数据
- 选择多个
- 在 Javascript 或 D3 中选择多个属性
- jquery选择多个并显示到特定容器
- 如何在Javascript中选择多个类而不是id
- 动态添加选项以选择多个JQuery插件
- 如何通过javascript中的按钮点击来选择和取消选择多个复选框
- 无法提交带有<选择多个必填项>在Internet Explorer中
- 如何选择多个元素的siblings()
- IE支持多个Angular ng类表达式
- 显示:无;在“选择多个”中,在 IE 8 上不起作用
- 无法使用 jquery 在 IE 中取消选择多个选项