0



我需要实现以下场景。我做到了，它在 Firefox 中有效。但在 IE 中无效。

情景：

  1. 如果我从第一个下拉列表中选择值，则其余下拉列表必须隐藏该选项。
  2. 如果我从第一个下拉列表中取消选择该选项，它应该可用于剩余的下拉列表。
  3. 它一直持续到最后一个下拉菜单。

我有以下代码

HTML

<div>
    <select data-label="Question 1" class="u85" id="test1">
        <option value="Please select...">Please select...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>
    </div>
    <div>
        <select data-label="Question 1" class="u85" id="test2">
            <option value="Please select...">Please select...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        </select>
    </div>
    <div>
        <select data-label="Question 1" class="u85" id="test3">
            <option value="Please select...">Please select...</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </div>
    <div>
        <select data-label="Question 1" class="u85" id="test4">
            <option value="Please select...">Please select...</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </div>

然后我有以下 Jquery

$(document).ready(function(){
        var selectionlist=[];
        $('select').change(function() 
        {   
            var currentid=$(this).attr("id");
            $(this).val()!=="Please select..."?selectionlist[$(this).parent().index()]=$(this).val():selectionlist[$(this).parent().index()]="";
            $('select').each(function(i){
            var currentselectboxid=$(this).attr("id");
                if($(this).val()!=="Please select...")
                    selectionlist[i]=$(this).val();

                    $('#'+$(this).attr("id")+' option').each(function(){

                            $.inArray($(this).val(),selectionlist)!=-1?$(this).hide():$(this).show();
                    });
            });

        });
    });

这在 Firefox 中运行良好。但在 IE 中不行。我已经在 google 中找到了一些东西。

JQuery 隐藏选项在 IE 和 Safari 中不起作用

如果我禁用它，它工作正常。但我的要求是隐藏和显示。我尝试添加和删除选项。但没有获得成功。

我怎样才能达到与Firefox相同的结果？

提前致谢。

4

2 回答 2

0

这可能会有所帮助...

我制作了一个可以帮助你的 jQuery 插件。有了它，你可以这样做：

$('#selection1').hideOption('1');
$('#selection1').showOption('1');

您可以根据需要隐藏和显示它们 - 它们保持原始顺序。它适用于所有浏览器。您可以在此示例中看到：jsFiddle - Toggle Dropdown Options

您可以获得Toggle Dropdown Options 插件。如果您不喜欢插件，只需将其中的 JavaScript 代码复制到您自己项目的 JavaScript 文件中即可。有关更多信息，请参阅插件上的阅读文档链接！

于 2014-01-21T23:25:59.433 回答
0

这个答案取决于你从哪里得到你的选择，但我会把这个集合放在一个集合中。每个人都有一个名为“selected”的属性，并在启动时设置为“false”。然后，我将使用此集合构建每个下拉列表，并且仅在项目的选定值设置为 false 时创建选项。当下拉列表更改时，将相应项目的“选定”值设置为“true”并重建剩余的下拉列表。这样您就不必处理隐藏/显示或禁用选项。

于 2013-03-30T02:01:41.267 回答