我有3个相同元素的下拉列表。第一个列表中选择的值不应显示在第二个下拉列表中。第二个列表中选择的值不应显示在第三个下拉列表中。如何使用jquery做到这一点?
答案 0 :(得分:2)
查看演示:http://jsfiddle.net/ezKDB/
Jquery插件:https://github.com/WilliamHuey/mutually_exclusive_list_jquery
用法:
$('select.classNameForEachList').onlyBeOne();
答案 1 :(得分: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();
});
的 The working demo 强> 的
希望这会给你一个想法。
答案 2 :(得分: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>
它不是很漂亮,但它有效。请参阅演示here。
更新我已清理代码了。这是指向上一版本的链接:http://jsfiddle.net/goranobradovic/JLMJn/2/
更新2 我已将所有html放在此处,只需将其复制到空的html文件即可。