[英]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最初甚至沒有用display:none隱藏;
提前謝謝,抱歉我的英語不好。
請嘗試以下代碼:由於使用了temp 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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.