CODEWITHSUNDEEP
javascriptjqueryhtml
Suraj
Suraj

Reputation: 2563

Disable certain selected option for its counterpart from dropdown

I have 2 dropdowns. When I select option One, I want option Five to be disabled from the second dropdown.

How can I achieve that. Below is the dropdown code.

<form>
  <select class="mySelect">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</form>

<br>

<form>
  <select class="mySelect">
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
  </select>
</form>

Here's the fiddle for that.

Upvotes: 0

Views: 45

Answers (2)

Jai
Jai

Reputation: 74738

First of all one thing you should notice that you cannot use same ids for multiple elements in one single page. Id has to be unique for each element.

In your case you can change it to class:

$('.mySelect:eq(0)').change(function(){
  $('option:contains(Five)').prop('disabled', this.value == "One");
}).change(); // <---this makes sure to fire the change event on doc ready
             // because you have option with value "one" already selected.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="mySelect">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</form>

<br>

<form>
  <select class="mySelect">
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
  </select>
</form>

Upvotes: 1

Jordi Castilla
Jordi Castilla

Reputation: 26961

First change id's (cannot be the same), after add disable and id to option five (one is default) and check wich is selected in first dropdown 

<option disabled>Five</option>

$("#mySelect").change(function() {
    //if($("#mySelect").selected() == "one")
    if ($("#mySelect").val() == "One")
       $("#five").prop("disabled", true);
    else 
       $("#five").prop("disabled", false);
});

FIDDLE

Upvotes: 0

Related Questions