使用jQuery取消隐藏或返回多个选择的选定选项 [英] Unhide or return selected options on multiple select using jquery
问题描述
伙计们,我正在创建一个代码,一旦选中该代码,它将删除另一个下拉菜单上的所选选项,我使用了jQuery(jquery-1.10.1.min),但我不知道如何返回所选的选项一旦用户改变主意,该选项或编号.
Guys I'm creating a code that will remove a selected option on the other dropdown once selected, I used jQuery (jquery-1.10.1.min) but I don't know how will I be able to return the chosen option or number once the user change their mind.
你能帮我吗?预先感谢.
Can you please help me? Thanks in advance.
这是我的剧本:
HTML
<select name="question_order[]" id="question_order1">
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
<select name="question_order[]" id="question_order2">
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
<select name="question_order[]" id="question_order3">
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
<select name="question_order[]" id="question_order4">
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
JavaScript
$(window).load(function(){
$('#question_order1').on('change', function() {
var val=this.value;
$("#question_order2").find("option:contains("+val+")").remove();
$("#question_order3").find("option:contains("+val+")").remove();
$("#question_order4").find("option:contains("+val+")").remove();
});
$('#question_order2').on('change', function() {
var val=this.value;
$("#question_order1").find("option:contains("+val+")").remove();
$("#question_order3").find("option:contains("+val+")").remove();
$("#question_order4").find("option:contains("+val+")").remove();
});
$('#question_order3').on('change', function() {
var val=this.value;
$("#question_order1").find("option:contains("+val+")").remove();
$("#question_order2").find("option:contains("+val+")").remove();
$("#question_order4").find("option:contains("+val+")").remove();
});
$('#question_order4').on('change', function() {
var val=this.value;
$("#question_order1").find("option:contains("+val+")").remove();
$("#question_order2").find("option:contains("+val+")").remove();
$("#question_order3").find("option:contains("+val+")").remove();
});
});//]]>
推荐答案
这里是一个首先存储<option>
html副本的解决方案.更改<selecct>
时,它将创建一个包含所有选定值的数组.然后,它会从存储的html中重建所有其他内容,并过滤允许的值.
Here's a solution that first stores a copy of the <option>
html. On change of a <selecct>
it creates an array of all the selected values . It then rebuilds all the other ones from the stored html and filters the values allowed.
$(function () {
var $quest = $('.question_order');
/* cache option html */
var optHtml = $quest.first().html();
$quest.on('change', function () {
/* make array of all selected values*/
var selecteds=$quest.find('option:selected').map(function(){
if(this.value){
return this.value
}
}).get();
/* rebuild the other select elements*/
$quest.not(this).each(function(){
var selVal=this.value || '';
/* create new set of options with filtered values*/
var $opts=$(optHtml).filter(function(){
return $.inArray(this.value,selecteds) ==-1 || this.value ==selVal
});
/* replace children*/
$(this).html($opts).val(selVal);
});
});
});
请注意,class="question_order"
已添加到每个元素.
Note that class="question_order"
added to each element.
这篇关于使用jQuery取消隐藏或返回多个选择的选定选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!