Question

我正在尝试在单个jsp中实现多个选择框。所有这个选择框将具有相同的选项值。当我从选择框1中选择第一个选项时，应该从剩余的选择框中删除该选项，

<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>

我该怎么做，我知道如果只有一个选择框，如何删除或添加选项，但对于多选框，我卡住了。请帮忙。

Answer 1

尝试此操作：您可以显示/隐藏列表中的option，而不是从列表中删除option，这样如果用户更改了选定的option，那么应该在其余的select中恢复相同的$(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(); }); }); {{1}}方框。

{{1}}

<强> DEMO

Answer 2

我建议使用jquery，代码看起来像这样：

$("select").change(function(e){
    var $s = $(e.target);
    $("select").not($s).find("option[value="+$s.val()+"]").remove();
});

JSFiddle

更新（受Bhushan Kawadkar的回答启发）

以下是如何改进它：

$("select").change(function(e){
    $("select option").removeAttr('disabled');
    $("select").each(function(i,s){
       $("select").not(s).find("option[value="+$(s).val()+"]").attr('disabled','disabled');
    });
});

JSFiddle

Answer 3

不是试图破解自己的多选框，而是使用真正的multi-select box怎么样？

＆＃13;

<select name="selectBox1" id="selectBox1" multiple="multiple">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

＆＃13;

Answer 4

你去：DEMO

$('select').on('change',function(){
    var value=$(this).val();
    $('select').not(this).each(function(){
        $(this).find('option[value='+value+']').remove();
    });
});

但请记住，这不是你在SO中提问的方式，你需要尝试一些代码，然后展示你尝试过的东西并寻求帮助解决问题！

Answer 5

尝试以下代码示例可能对您有用：

$(document).ready(function(){
  $('select').on('change', function(event ) {
    var value = $(this).val();
    $(this).prop('disabled', false);

    $('select').find('option[value="'+ value +'"]')
     .attr('disabled', 'disabled')
     .hide();
  });
});

从其他选择框中删除所选选项

5 个答案: