Java Script DrobDown Disable Mark

Question

Here is my question, for exp:

 <select name="select1" >
 <option value="default" selected="selected">Default</option>
 <option value="1">1</option>
 <option value="2">2</option>
 </select>
 <select name="select2" >
 <option value="default" selected="selected">Default</option>
 <option value="3">3</option>
 <option value="4">4</option>
 </select>

If I select (number 1) from (select1), then (select2) totally will be disabled. or if i select (number4) from (select2) then (select1) totally will be disabled. I mean depends on select name, other select name will be disabled. Is it possible to give me the java code for this ? Thank you

Answer 1

Using jquery, it'd be something like this. jsfiddle

HTML:

<select id="select1" name="select1" >
 <option value="default" selected="selected">Default</option>
 <option value="1">1</option>
 <option value="2">2</option>
 </select>
 <select name="select2" id="select2" >
 <option value="default" selected="selected">Default</option>
 <option value="3">3</option>
 <option value="4">4</option>
 </select>

JS:

$('#select1').on('change', function(){
    if($(this).val() != 'default'){
        $('#select2').prop('disabled', true);
    }
    else{
        $('#select2').prop('disabled', false);
    }
});

$('#select2').on('change', function(){
    if($(this).val() != 'default'){
        $('#select1').prop('disabled', true);
    }
    else{
        $('#select1').prop('disabled', false);
    }
});

As I said, you need to correct your html as well. In your website, use the following html instead of what you have i.e. add ID's to your select dropdown.

<select id="select1" name="select1" ...
<select id="select2" name="select2" ...