Reputation: 2821
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
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
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');
});
}
Upvotes: 1
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