CODEWITHSUNDEEP
javascriptjquery
MrSo
MrSo

Reputation: 640

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

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.

Upvotes: 0

Views: 2203

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

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

Upvotes: 0

Kirill Rogovoy
Kirill Rogovoy

Reputation: 591

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

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

Upvotes: 2

Related Questions