Question

$('.input-group select').change(function() {
    
    var value = $(this).val();
alert($('.input-group select').siblings('select').children('option').length); 
    $(this).siblings('select').children('option').each(function() {
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true).siblings().removeAttr('disabled');   
        }
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input-group 1">
    <select name="select1">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>

<div class="input-group 2">
    <select name="select2">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>

我有以下代码，并且想要选择select中的选项，这样当用户在第一个值A中选择该值时，在第二个选择框中禁用该值并反向。

我找到了jQuery的兄弟姐妹但是我无法在div中选择它...我在做错了吗？

Answer 1

请试试这个...
这里假设HTML中只有两个select框，这个功能应该设计用于：

＆＃13;

$ = jQuery;
$("#select1, #select2").on("change", function() {
     if($(this).attr("id") == "select1"){
        src = "#select1"; target="#select2";
     }
     else{
        src = "#select2"; target="#select1";
     }

     $(target).children().removeAttr("disabled");
     $(target).find("option[value="+$(src).val()+"]").attr("disabled", "disabled");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group 1">
    <select id="select1">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>

<div class="input-group 2">
    <select id="select2">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>

＆＃13;

编辑
更新了jQuery以解决注释部分中表达的问题。这里假设新的select框将以与现有框相似的方式添加，即在新的<div class="input-group">下。因此，根据给定的HTML布局，更新的jQuery将是：

$("select").on("change", function(){
    $(this).parent().siblings().find("option").removeAttr("disabled");
    $(this).parent().siblings()
           .find("option[value="+$(this).val()+"]").attr("disabled", "disabled");
});

建议：

将上述代码包含在function中，并在动态添加新select框时调用该函数 - 再次假设它将添加到{{<div class="input-group">下1}}并且在第一个这样的元素正上方会有一个父<div>。
将<option>No Match</option>更改为<option value="0">No Match</option>或类似。

Answer 2

这里我用4个选择框测试这个...我注意到当我选择前两个框值时，选择框3＆amp; 4不会禁用1＆amp;的选择。 2选择框...我在脚本中看到这个，当我添加10个项目...前两个选择框它按预期工作但其他3＆amp; 4不...这里是在Dhruv Saxena上面发布的代码..如果有人可以请注意为什么这不能按预期工作...例如，这需要按照描述的方式工作：

选择Box＃1 Test Selected 选择Box＃2 Test 2 Selected＆amp;测试被禁用（更新选择框＃1测试2禁用）选择Box＃3 Test 3 Selected＆amp;测试＆amp;禁用Test2（更新选择框＃1测试2＆amp; Test3禁用和更新选择框＃2测试3禁用）

等等......所以当你在当前选择框中选择项目以在所有其他选择框中禁用此项目时，qoal是...

＆＃13;

$("select").on("change", function(){
    $(this).parent().siblings().find("option").removeAttr("disabled");
    $(this).parent().siblings()
           .find("option[value="+$(this).val()+"]").attr("disabled", "disabled");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input-group 1">
    <select id="1">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 3</option>
    </select>
</div>

<div class="input-group 2">
    <select id="2">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 3</option>
    </select>
</div>

<div class="input-group 3">
    <select id="3">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 3</option>
    </select>
</div>

<div class="input-group 4">
    <select id="4">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 3</option>
    </select>
</div>

＆＃13;

jQuery兄弟姐妹不选择div里面的选项？

2 个答案: