Fatal编程技术网

jquery下拉列表

jquery

jquery下拉列表,jquery,Jquery,我有3个相同元素的下拉列表。在第一个列表中选择的值不应显示在第二个下拉列表中。在第二个列表中选择的值不应显示在第三个下拉列表中。如何使用jquery执行此操作？以下是一个示例： HTML <select class="sel-1"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Thre

我有3个相同元素的下拉列表。在第一个列表中选择的值不应显示在第二个下拉列表中。在第二个列表中选择的值不应显示在第三个下拉列表中。如何使用jquery执行此操作？

以下是一个示例：

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>

var allSelects = $('select[class^=sel-]');
allSelects.on('change', function() {
  allSelects.find('options').show();
  allSelects.not(this).find('option[value="'+ this.value +'"]').hide();
});
希望这能给你一个想法。

以下是可能的解决方案：

<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>


一
二
三
四
五
六
七
$（文件）.ready（初始化）；
函数映射项（索引，元素）{
var项目=[]；
push（{value:$（elem.val（），text:$（elem.text（）}）；
退货项目；
}
函数replaceItems（items，appendTo）{
appendTo.empty（）；
对于（项目中的var i）{
var项目=项目[i]；
if（item.value&&item.text）{
appendTo.append（“+item.text+”签出演示：

Jquery插件：

用法：


$('select.classNameForEachList').onlyBeOne();



$（“.ACL”）.change（函数（事件）{//alert（$（“.ACL1选项：选中”）.val（））；preferenceObject[“ACL1”]=$（“.ACL1选项：选中”）.val（）；//alert（$（“.ACL1推送”）；//alert（$（“.ACL2选项：选中”）.val（）；preferenceObject[“ACL2”]=$（“ACL2选项：选中”）.val；//alert（“ACL2推送”）；preferenceObject[“acl3”=$（）#ACL3选项：selected“.val（）；}）；ACL：同样，我在div ACL.bt nw中创建了acl2 ACL3，我不知道要做什么！！m通过请求获取acllist.getAttribute这是什么？-->$（'select[class^=sel-'）；dis是我想要的wt…非常感谢：-）I’我会尝试在我的代码中使用它list@anil好的，您可以使用..但是使用公共类更容易…这是您的选择。但是不要忘记接受作为答案$（'select[class^=sel-'））；m nt gettin dis line。@anil它选择了所有
select
框，该框的
class
名称以
sel-
开头。当我在eclipse中粘贴相同的代码时。它显示在第二个n第三个列表中。首先粘贴到记事本，JSFIDLE有时会在末尾放一些奇怪的字符。这很好。bt它不显示在第二个和第三个列表中的任何值中。html我在body中编写的代码和在head中编写的js代码如果您使用这个js代码，您需要在html中使用数据子属性，就像在JSFIDLE中一样。第一个选择有数据子级=“#idofsecondselect”，第二个选择有数据子级=“#idofthirdselect”