从其他选择框中删除所选选项 [英] remove selected option from another select box
问题描述
我正在尝试在单个jsp中实现多个选择框。所有这个选择框将具有相同的选项值。当我从选择框1中选择第一个选项时,应该从剩余的选择框中删除该选项,
I am trying implement multiple select box in a single jsp. All this select box will have the same option value. When i select first option from selecct box 1, then that option should be removed from remaining select box,
<select name="selectBox1" id="selectBox1">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<select name="selectBox2" id="selectBox2">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<select name="selectBox3" id="selectBox3">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
我该怎么做,我知道如果只有一个选择框,如何删除或添加选项,但对于多选框,我卡住了。请帮忙。
How do i do it, i know how to remove or add option if there is only one selecct box, but for multi select box, i am stuck. Please help.
推荐答案
试试这个:而不是从选项
中删除您可以显示/隐藏它的列表,以便如果用户更改选定的选项
,那么相同的选项
应该在休息时恢复选择
框。
Try this : Instead of removing option
s from the list you can show / hide it, so that if user change selected option
then same option
should get restored in rest of the select
boxes.
$(document).ready(function(){
$('select').on('change', function(event ) {
//restore previously selected value
var prevValue = $(this).data('previous');
$('select').not(this).find('option[value="'+prevValue+'"]').show();
//hide option selected
var value = $(this).val();
//update previously selected data
$(this).data('previous',value);
$('select').not(this).find('option[value="'+value+'"]').hide();
});
});
DEMO
这篇关于从其他选择框中删除所选选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!