0

我有 3 个相同元素的下拉列表。在第一个列表中选择的值不应显示在第二个下拉列表中。在第二个列表中选择的值不应显示在第三个下拉列表中。如何使用jquery做到这一点？

4

3 回答 3

2

查看演示：http: //jsfiddle.net/ezKDB/

Jquery 插件：https ://github.com/WilliamHuey/mutually_exclusive_list_jquery

用法：

$('select.classNameForEachList').onlyBeOne();
于 2012-09-24T05:33:32.860 回答
0

这是一个例子：

HTML

<select class="sel-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>


<select class="sel-2">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>


<select class="sel-3">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

jQuery

var allSelects = $('select[class^=sel-]');
allSelects.on('change', function() {
  allSelects.find('options').show();
  allSelects.not(this).find('option[value="'+ this.value +'"]').hide();
});

工作演示

希望这会给你一个想法。

于 2012-09-17T08:21:18.527 回答
0

这是可能的解决方案：

<html>
<body>
<select id="first" data-child="#second">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
<option value="7">seven</option>
</select>

<select id="second" data-child="#third">
</select>

<select id="third">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(init);

function mapItems(index, elem){
    var items = [];
    items.push({value:$(elem).val(), text:$(elem).text()});    
    return items;
}

function replaceItems(items, appendTo){
    appendTo.empty();
    for(var i in items){
        var item = items[i];
        if(item.value && item.text){
            appendTo.append("<option value='"+item.value+"'>"+item.text+"</option");
        }
    }
}

function selected(e){        
    var items = $(this).find("option:not(:selected)").map(mapItems);
    var child = $($(this).attr("data-child"));
    replaceItems(items, child);
    child.change();
}

function init(){
    var first = $("select#first");    
    var second = $("select#second");    
    var third = $("select#third");
    first.change(selected);
    second.change(selected);
    first.trigger('change');
}​
</script>
</body>
</html>

它不是很漂亮，但它有效。在此处查看演示。

更新我已经清理了代码。这是最后一个版本的链接：http: //jsfiddle.net/goranobradovic/JLMJn/2/

更新 2我已经把所有的 html 放在这里，只需将它复制到空的 html 文件中就可以了。

于 2012-09-17T08:34:11.610 回答