Jquery check for duplicate dropdown values

Question

I'm trying to do prevent a user from having the same value in two drop down menus. Jquery is returning true regardless of the values selected.

$("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/

Is there a proper way to do this?

Emre Erkan · Accepted Answer · 2012-05-29 23:51:32Z

3

If you want to prevent user to select same value from other dropdown, you may use something like this;

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');

working case is here (.not(), .find(), .prop(), .filter())

edited May 29, 2012 at 23:51

answered May 29, 2012 at 23:41

Emre Erkan

8,4723 gold badges52 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Norse Over a year ago

Though a bit off from my original direction, this is very helpful. +1

ahren · Accepted Answer · 2012-05-29 23:39:47Z

1

You need to remove the DUBS text on false, and also not test the same select field. Use not() to achieve this.

Demo: 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");
       }
   });
});

answered May 29, 2012 at 23:39

ahren

17k5 gold badges52 silver badges70 bronze badges

Comments

Ayman Safadi · Accepted Answer · 2012-05-29 23:35:46Z

0

I don't think it's returning true every time, your logic just doesn't remove the DUBS text if false.

Demo: 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("");
        }
    });
});

answered May 29, 2012 at 23:35

Ayman Safadi

11.6k1 gold badge30 silver badges42 bronze badges

Comments

Timm · Accepted Answer · 2012-05-29 23:44:54Z

0

The DUBS text isn't set back to empty before each change

Your jQuery could be written simply like this

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

Here is a working example: http://jsfiddle.net/tuC4Y/1/

edited May 29, 2012 at 23:44

answered May 29, 2012 at 23:39

Timm

12.8k4 gold badges34 silver badges44 bronze badges

3 Comments

ahren Over a year ago

The change code was already attached to both dropdowns, using $= in the attribute selector. The .each function would be needed if there was another select - so it could just be a limitation of the example.

Norse Over a year ago

@Tim Your method is the manual way to do it. Suppose in my work I have 10 dropdown menus. I'm seeking a way to evaluate each select by iteration, not by checking each individual select id.

Timm Over a year ago

@Norse Yep sorry, guess I took the "in two drop down menus" too literally

Collectives™ on Stack Overflow

Jquery check for duplicate dropdown values

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related