使用jquery取消隐藏或返回多选时的选定选项
Unhide or return selected options on multiple select using jquery
伙计们,我正在创建一个代码,一旦选择,就会删除另一个下拉列表中的一个选定选项。我使用了jQuery(jQuery-1.10.1.min),但我不知道一旦用户改变主意,我将如何返回选定的选项或数字。
你能帮帮我吗?提前谢谢。
这是我的脚本:
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中重建所有其他值,并过滤允许的值。
$(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"
。
DEMO
试试这个
<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>
演示
相关文章:
- 为什么数据列表选项的id返回空值
- 引导选项卡不适用于历史记录.返回选项
- 在 jquery 选项卡中查找 span 标记并返回该索引
- 选择选项的值将在表单上返回 erro 时丢失
- 当我点击浏览器返回选项时,阻止在php上刷新页面
- 辅助功能键盘专用选项卡到z索引“;返回顶部”;
- 使用jquery取消隐藏或返回多选时的选定选项
- 引导程序3:返回页面刷新的下拉选项卡
- 自定义Div滑块运行过快,但仅当从另一个浏览器选项卡返回时
- Appcelerator 中的自定义选项卡栏 - 如何返回到根窗口
- 纯 JS 获取所选选项数据属性值返回 Null
- select2 - 如果多个选项共享一个值,则返回不正确的选定选项
- 函数,使用 React 返回带有选项的选择
- 自定义车把.js助手不返回选项.fn
- 如何在 asp.net 中使用角度选项卡返回上一页
- 当选项卡加载火狐插件SDK时返回函数
- 锤子.js 2.0 使用 jquery 插件时不返回事件选项
- 对多个选项进行筛选数组以在新选择中返回选项
- 如何从angularjs指令中的ng选项返回对象的索引
- Bookshelf js fetch withRelated选项返回空关系对象