我有多个下拉列表,我loop
从database
获取值并将其显示在下拉列表中,假设我有四个下拉列表,每个下拉列表包含1到4的值,我需要的是用户选择" 1"来自"下拉1"那么其他下降不应该有1个存在,意味着从这四个下降中只选择1个。如果用户选择" 4"来自"下拉2"那么其他三个下降将不会有4个,
如何从jQuery
?
下面的快照将从1到4排名,应该从1到4排名,因此用户可以选择1个项目,而不会从其他项目中选择此项目。
您可以在此jsFiddle中看到完整演示。
修改 现在看到错误,最后一个下拉列表是空的,它没有显示任何内容。
答案 0 :(得分:1)
您需要的是,当您从任何下拉列表中选择任何选项时,您必须从其他列表中删除该选项,但您选择的那个除外。试试这种方式,
$("select").on("change", function(){
$("select").not(this).children("option:contains(" + $(this).val() + ")").remove();
});
参考文献: .not(), .children(),:contains(),.remove()
[ 注意: 没有两个或更多元素应该具有相同的 id 。在这种情况下,您应该使用 class 。 OP的标记需要更新。]
另一个选项:
如果您不想删除这些选项,并希望随时重置这些选项,则可以隐藏选项,并在重置时显示所有选项。只需添加以下HTML&代码中的jQuery。
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();
});
答案 1 :(得分:0)
我更喜欢这样做:
$("select").on('focus', function () {
previous = this.value;
}).change(function() {
$("select[value="+$(this).val()+"]").not(this).val(previous);
});
每当用户选择一个值时,您选择具有相同值的<select>
元素并切换它们。
此外,还有一个限制。您必须为每个选择元素加载具有不同值的页面,就像我在下面的小提琴中所做的那样。
previous
变量在更改之前获取选择的旧值,因此您可以使用它来设置与目标选择具有相同值的选择值。
答案 2 :(得分:0)
根据 Ashad Shanto 评论,您需要在给出一次后重新更改。我给了一个重置框。并禁用而不是删除
<!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>
答案 3 :(得分:-1)
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>