Select empty value in dropdown list with jQuery if not contains string

Question

I'am trying to select the empty (first) value of a dropdown select option if it does not contains the value from an another dropdown select list:

$('#FirstDropdown').change(function() {
    if ( $('#SecondDropdown option').filter(':contains(' + this.value  + ')') ){
        $('#SecondDropdown option').filter(':contains(' + this.value  + ')').prop('selected',true);
    }else{
        $("#SecondDropdown option[value='']").prop('selected',true);
    }
});

This code work well if #SecondDropdown option contains this.value but the else statement doesn't reset the dropdown list if not.

Any suggestion please ?

EDIT : The dropdown lists look like this :

<select id="FirstDropdown">
    <option value="" selected="selected">&nbsp;</option>
    <option value="VAL1">First Value</option>
    <option value="VAL2">Second Value</option>
    <option value="VAL3">Third Value</option>
    <option value="VAL4">Fourth Value</option>
</select>

<select id="SecondDropdown">
    <option value="-1">&nbsp;</option>
    <option value="12">VAL1 SELECT OPTION</option>
    <option value="15">VAL2 SELECT OPTION</option>
    <option value="10">VAL3 SELECT OPTION</option>
</select>

EDIT : Added a JsFiddle.

I have édited my question to add a JsFiddle. And to show why I need to evaluate the value with "containts" filter. Sorry for omission — MrSo
– MrSo, Commented Feb 4, 2015 at 8:27

Milind Anantwar · Accepted Answer · 2015-02-04 08:23:29Z

2

You do not have any option element having value=''. You need to use $("#SecondDropdown option[value='-1']").prop('selected',true); . you would also need to change the condition in if statement to this.value!='':

$('#FirstDropdown').change(function() {
  if (  this.value!='' ){
    $('#SecondDropdown option').filter(':contains(' + this.value  + ')').prop('selected',true);
}else{
    $("#SecondDropdown option[value='-1']").prop('selected',true);
}});

Working Demo

edited Feb 4, 2015 at 8:23

answered Feb 4, 2015 at 8:17

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

2 Comments

MrSo Over a year ago

@Milid Anantwar Thanks for this. It works well if I select the first option that contains blank value. I have edited my question cause in my case the first dropdown may contains values that could not be in the second dropdown. Sorry for omission

Milind Anantwar Over a year ago

then using your old if statement should work for you

Bhushan Kawadkar · Accepted Answer · 2015-02-04 09:17:22Z

0

Try this :There is problem in your if condition as it is getting always true. You can use .length to check if option exist and select the option else select blank

$('#FirstDropdown').change(function() {
    if ($('#SecondDropdown option:contains('+this.value +')').length>0){
        $('#SecondDropdown option:contains('+this.value +')').prop('selected',true);
    }else{
        $("#SecondDropdown option[value='-1']").prop('selected',true);
    }
});

JSFiddle Demo

edited Feb 4, 2015 at 9:17

answered Feb 4, 2015 at 8:07

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

4 Comments

MrSo Over a year ago

The if statement works well in my question. I have to evaluate the content with the jQuery filter contains. And this work well. But not in the else statement.

Bhushan Kawadkar Over a year ago

can you try $("#SecondDropdown option[value=]").prop('selected',true); in else statement. Please share your html with select options code

Bhushan Kawadkar Over a year ago

please have a look over edited answer (for else part)

MrSo Over a year ago

Thanks. but this don't work. You still trying to evaluate the first condition. And this is not where is the problem.

Kirill Rogovoy · Accepted Answer · 2015-02-04 08:41:31Z

0

This will work for you.
First, you have to check you this.value, because any string contains ''. Second, as if works fine, you just need to filter options by [value=-1]

Final JS:

$('#FirstDropdown').change(function() {
    var $second = $('#SecondDropdown option').filter(':contains(' + this.value  + ')');
    if (this.value && $second){
        $second.prop('selected',true);
    }else{
        $("#SecondDropdown option[value=-1]").prop('selected',true);
    }
});

edited Feb 4, 2015 at 8:41

answered Feb 4, 2015 at 8:32

Kirill Rogovoy

6014 silver badges12 bronze badges

1 Comment

MrSo Over a year ago

As Milind Anantwar wrote, this work well when selection the "-1" value. Can you please read again my question. I have edited because I need to evalute the "Not contains" condition. Thanks for helping

Collectives™ on Stack Overflow

Select empty value in dropdown list with jQuery if not contains string

3 Answers 3

Working Demo

2 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related