javascript - Disable 2nd dropdown option based on first dropdown - Stack Overflow

admin管理员组

文章数量:1401614

I have two dynamic dropdowns but both dropdown's value and options are same. What I want that if user select 'apple' from first dropdown then the second dropdown's apple option will be disabled (using javascript). In short user can not select same value from both.

//first drop down
<select name="fruit1">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

//second dropdown  
<select name="fruit2">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

I have tried with jQuery:

function witness()
{
    var op=document.getElementById("witness1").value;
    $('option[value='+op+']').prop('disabled', true);
}

But with this both dropdown's value are disabled and if I select mango then apple will not enabled it remains disabled. I know I did not pass id so both dropdown value are disabled but where should i pass ?

If user select apple then in second dropdown apple will be disabled, I want to do this using Javascript or jQuery.

I have two dynamic dropdowns but both dropdown's value and options are same. What I want that if user select 'apple' from first dropdown then the second dropdown's apple option will be disabled (using javascript). In short user can not select same value from both.

//first drop down
<select name="fruit1">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

//second dropdown  
<select name="fruit2">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

I have tried with jQuery:

function witness()
{
    var op=document.getElementById("witness1").value;
    $('option[value='+op+']').prop('disabled', true);
}

But with this both dropdown's value are disabled and if I select mango then apple will not enabled it remains disabled. I know I did not pass id so both dropdown value are disabled but where should i pass ?

If user select apple then in second dropdown apple will be disabled, I want to do this using Javascript or jQuery.

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 30, 2016 at 7:39 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Jul 24, 2015 at 11:26 David CoderDavid Coder 1,13822 gold badges1616 silver badges5050 bronze badges 10

• 1 What have tried so far? – Dean.DePue Commented Jul 24, 2015 at 11:31
• see my edited code ! – David Coder Commented Jul 24, 2015 at 11:35
• name property is double given in your code. – brandelizer Commented Jul 24, 2015 at 11:40
• You should try jqueys $('#YourSelect').change(function(){alert('first select changed');}); – brandelizer Commented Jul 24, 2015 at 11:41
• I'd suggest you let the user not select that option by throwing a message rather than disabling options. – lshettyl Commented Jul 24, 2015 at 11:42

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 3

Fiddle: https://jsfiddle/3pfo1d1f/

To get the functionality you're after, you need to hook into the change event on the first dropdown, in order to disable the matching element in the second drop-down.

I also initialised the first element in the second dropdown as disabled ( as this chosen by default in the first dropdown)

Used jquery as you are:

HTML:

<!-- first dropdown -->
<select id="fruit1">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

<br /> <br />

<!-- second dropdown -->
<select id="fruit2">
    <option value="1" disabled>Apple</option>
    <option value="2">Mango</option>
</select>

JQuery:

$('#fruit1').on( "change", function() {
    var op = $( this ).val();
    $('#fruit2 option').prop('disabled', false);
    $('#fruit2 option[value='+op+']').prop('disabled', true);
});

This should still work, no matter how many options you have in both the dropdowns

Try this out:

HTML:

<select id='fruit1' onchange="witness();">
    <option selected></option>
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

<select id='fruit2'>
    <option selected></option>
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

JQuery:

function witness(){
    $("#fruit2 option").each(function(){
        if($("#fruit1 option:selected").val() == $(this).val())
            $(this).attr("disabled", "disabled");
        else
            $(this).removeAttr("disabled");
    });
}

You can see a working exemple here: https://jsfiddle/mqjxL4n0/

<select name="firstselect" id="firstselect">
   <option value="apple">Apple</option>
   <option value="orange">Orange</option>
</select>

<select name="secondselect" id="secondselect">
   <option value="apple">Apple</option>
   <option value="orange">Orange</option>
</select>

<script>
   $(document).ready(function(){
      $('#firstselect').change(function(){
         var firstselected = $(this).val();
         if(firstselected ){
             $('#secondselect option').each(function(){
                $(this).prop('disabled', false);
                if($(this).val()==firstselected )
                $(this).prop('disabled', true);
             });
         }
         else {
             $('#secondselect option').each(function(){
                $(this).prop('disabled', false);
             });
         }
      });
   });
</script>

本文标签： javascriptDisable 2nd dropdown option based on first dropdownStack Overflow