CODEWITHSUNDEEP
javascriptjquery
teekib
teekib

Reputation: 2821

Jquerymobile select menu disable options

Hi i am finding hard time to make this work, In my jquery Mobile app i have 3 slelect menus with options common in all the menus, code is as below

<select class="mySelect4" data-corners="false" id="objective1" >
     <option value=1>Select</option>
      <option value=2>Generate</option>
      <option value=3>Increase</option>
      <option value=4>Enhance customer engagement</option>

    </select>

      <select class="mySelect5" data-corners="false" id="objective2" >
     <option value=1>Select</option>
      <option value=2>Generate</option>
      <option value=3>Increase</option>
      <option value=4>Enhance</option>
    </select>

     <select class="mySelect6" data-corners="false" id="objective3" >
     <option value=1>Select objective 3</option>
      <option value=2>Generate</option>
      <option value=3>Increase</option>
      <option value=4>Enhance</option>
    </select>

if the user select one option in the fist select menu that option should be disabled in other two select menus.Any idea or solution is appreciated

Upvotes: 0

Views: 1575

Answers (3)

Gaurang s
Gaurang s

Reputation: 842

 $('#objective1').change(function(){
      var value1=$(this).val();

      $('#objective2').find("option").each(function(){
           if($(this).val()==value1){
                $(this).attr("disabled","disabled");
           }
      });

 });

and same for objective2 and objective3 select box

i hope it will useful for u

Upvotes: 4

benomatis
benomatis

Reputation: 5643

Add a function onchange to each of your drop-downs like this:

<select onchange="disableOther(this)" class="mySelect4" data-corners="false" id="objective1">

Then try this in js:

function disableOther(data) {
    $('select').not(data).each( function() {
        $('option[value=' + $(data).val() + ']', this).attr('disabled', 'disabled');
    });
}

HERE IS A DEMO

Upvotes: 1

Harshit Jain
Harshit Jain

Reputation: 492

Using Jquery its very simple. Below is the whole code.

$(document).ready(function(){
    $('#objective1').change(function(event){
        var selectedValue = $(this).val();
        disableElements($('#objective2'),selectedValue);
        disableElements($('#objective3'),selectedValue);
    });

});

var disableElements = function($selectList,selectedValue){
    $selectList.find('option').each(function(){
        if($(this).val() === selectedValue){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
}

Upvotes: 1

Related Questions