4

我是新来的，也是一名初级开发人员。我的 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>

Java脚本：

    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 隐藏；

在此先感谢，并为我糟糕的英语感到抱歉。

4

2 回答 2

1

请尝试以下代码：使用临时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>
于 2013-11-08T11:30:21.283 回答
-1

代替

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);
于 2013-11-08T10:50:57.177 回答