Multiple Drop downs the item which is selected in one drop down should not be available in another drop down
Question
I have multiple drop downs on which I loop to get the values from database and display them into the drop down, suppose I have four drop downs each drop down contains values from 1 to 4, what I need is if user select "1" from "drop down 1" then other drop downs should not have 1 present in it, means only 1 is selected once from these four drop downs. If user select "4" from "drop down 2" then 4 will not be available in other three drop downs, How can I achieve this functionality from jQuery ?
The snapshot below will be ranking from 1 to 4 it should be ranked from 1 to 4, so user can select 1 item and this item will not be selected from others.
You can see a full demo in this jsFiddle .
Edit See the error now the last dropdown is empty, its not showing any thing.
4 answers
solution1
1 2015-01-01 10:12:19
What you need is that when you select any option from any of your dropdownlists you'll have to remove that option from the rest of the lists except the one you selected from. Try this way,
$("select").on("change", function(){
$("select").not(this).children("option:contains(" + $(this).val() + ")").remove();
});
References : .not() , .children() , :contains() , .remove()
[ Note : No two or more elements should have same id . In such situation you should use class . OP's markup need to be updated.]
Another Option :
If you don't want to remove the options and want to reset these whenever you want then you can hide the options and on reset show them all. Simply add the following HTML & jQuery in your code.
HTML :
// reset button
<button id="resetddls">Reset</button>
jQuery :
// here you are hiding the selected option from rest of the ddls not removing.
$("select").on("change", function(){
$("select").not(this).children("option:contains(" + $(this).val() + ")").hide();
});
$("#resetddls").on("click", function(){
$("select option").show();
});
solution2
0 ACCPTED 2015-01-01 10:52:05
I ll prefer doing it this way :
$("select").on('focus', function () {
previous = this.value;
}).change(function() {
$("select[value="+$(this).val()+"]").not(this).val(previous);
});
Whenever the user choose a value, you select the <select> element with the same value and switch them.
Moreover, there is a restriction. You have to load the page with distinctive values for each select element as I did in the fiddle below.
The previous variable gets the old value of the select before change, so you can use it to set the value of the select which have the same value as your target select.
solution3
0 2015-01-01 11:48:03
Since you need to re change after giving once , according to Ashad Shanto comments . I gave a reset box. And disabled instead of remove
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="questions">
<input type="hidden" name="questions[9][id]" value="85" class="ui-wizard-content">
<input type="hidden" name="questions[9][option_type]" value="dropdown" class="ui-wizard-content">
<h3>Question 10</h3>
<p></p><p>this is an example question for testing rankings. </p>
<p><input type="checkbox" id="resetoption" /> Reset Option</p>
<div class="checkbox" id="">
<label>
<input type="checkbox" checked="checked" onclick="return false" class="required ui-wizard-content" name="questions[9][option]" value="372">
Rank1 </label>
<select style="width: 200px" class="ui-wizard-content valid">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="checkbox" id="">
<label>
<input type="checkbox" checked="checked" onclick="return false" class="required ui-wizard-content" name="questions[9][option]" value="373">
Rank2 </label>
<select style="width: 200px" class="ui-wizard-content valid">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="checkbox" id="">
<label>
<input type="checkbox" checked="checked" onclick="return false" class="required ui-wizard-content" name="questions[9][option]" value="374">
Rank3 </label>
<select style="width: 200px" class="ui-wizard-content valid">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="checkbox" id="">
<label>
<input type="checkbox" checked="checked" onclick="return false" class="required ui-wizard-content" name="questions[9][option]" value="375">
Rank4 </label>
<select style="width: 200px" class="ui-wizard-content valid">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<script>
$('#resetoption').on('click', function () {
if ($(this).is(':checked')) {
$("select").children("option").removeAttr("disabled");
}
});
$("select").on('change', function () {
$("select").not(this).children("option:contains(" + $(this).val() + ")").attr('disabled', 'disabled');
});
</script>
</body>
</html>
solution4
-1 2020-03-04 09:14:25
maintain one array which are got selected already in angularjs
<select ng-model="obj.subject" on-change="selectedItem(obj.subject)">
<option value=""></option>
<option ng-if="selectedArray.indexOf(obj.id)===-1||obj.id === obj.subject" ng-
repeat="obj in list"
value="{{obj.id}}">{{obj.subject}}
</option>
</select>
<select ng-model="obj.subject1" on-change="selectedItem(obj.subject)">
<option value=""></option>
<option ng-if="selectedArray.indexOf(obj.id)===-1||obj.id === obj.subject1"
ng-repeat="obj in list" value="{{obj.id}}">{{obj.subject}}</option>
</select>
<select ng-model="obj.subject2" on-change="selectedItem(obj.subject)">
<option value=""></option>
<option ng-if="selectedArray.indexOf(obj.id)===-1||obj.id === obj.subject2"
ng-repeat="obj in list" value="{{obj.id}}">{{obj.subject}}</option>
</select>
<script>
$scope.list = [
{
id:1,
subject:"physics"
},
{
id:2,
name:"chemistry"
},
{
id:3,
name:"maths"
}
];
$scope.obj = {};
$scope.selectedArray = [];
$scope.selectedItem = function (){
$scope.selectedArray = [];
$scope.selectedArray.push(obj.subject);
$scope.selectedArray.push(obj.subject1);
$scope.selectedArray.push(obj.subject2);
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.