jquery - Jquery检查重复的下拉值

Question

我试图阻止用户在两个下拉菜单中具有相同的值。无论选择什么值，Jquery 都会返回 true。

$("select[id$='go']").change(function() {
    var value = $(this);
    $("select[id$='go']").each(function() {
        if ($(this).val() === value.val()) {
            $('#work').html("DUBS");
        }
    });
});

<select id="_go">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="_gogo">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<div id="work"></div>

http://jsfiddle.net/zbaKE/1/

有没有合适的方法来做到这一点？

Answer 1

如果你想阻止用户从其他下拉列表中选择相同的值，你可以使用这样的东西；

var $select = $("select[id$='go']");
$select.change(function() {
    $select
      .not(this)
      .find('option')
      .prop('disabled', '')
      .filter('[value='+this.value+']')
      .prop('disabled','disabled');
});
$select.eq(0).trigger('change');

工作案例在这里( .not(), .find(), .prop(), .filter())

Answer 2

您需要删除 上的 DUBS 文本false，并且不要测试相同的选择字段。用来not()实现这一点。

演示：http: //jsfiddle.net/zbaKE/3/

$("select[id$='go']").change(function() {
   var value = $(this).val();
   $("select[id$='go']").not(this).each(function() {
       if ($(this).val() == value) {
           $('#work').html("DUBS");
       }else{
           $("#work").html("SUBS");
       }
   });
});​

Answer 3

我认为它不会true每次都返回，您的逻辑只是不会删除DUBS文本 if false。

演示：http: //jsfiddle.net/zbaKE/2/

$("select[id$='go']").change(function() {
    var value = $(this);
    $("select[id$='go']").each(function() {
        if ($(this).val() === value.val()) {
            $('#work').html("DUBS");
        } else {
            $('#work').html("");
        }
    });
});​

Answer 4

每次更改之前，DUBS 文本都不会设置回空

您的 jQuery 可以像这样简单地编写

$("select[id$='go']").change(function(){
    $('#work').html('Different');
    if ($("select[id=_go]").val() == $("select[id=_gogo]").val()){
        $('#work').html("Same");
    }
});

这是一个工作示例：http: //jsfiddle.net/tuC4Y/1/