Question

我有3个字段multlectlect，可以选择相同的选项。

<div>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">TAB 1:</a></li>
  <li><a data-toggle="tab" href="#tab2">TAB 2:</a></li>    
  <li><a data-toggle="tab" href="#tab3">TAB 3:</a></li>  
</ul>

<div class="tab-content">

  <!-- TAB 1 -->
  <div id="tab1" class="tab-pane fade in active">    
    <div class="form-group">
      <label class="control-label col-sm-3" for="select1">Produkt:</label> 
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select2', 'select3')" multiple name="select1[]" id="select1">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option> 
          <option value="produkt3">Produkt 3</option> 
          <option value="produkt4">Produkt 4</option>                        
        </select>
      </div>
    </div>
  </div>
  <!-- TAB 2-->
  <div id="tab2" class="tab-pane fade">    
    <div class="form-group">
      <label class="control-label col-sm-3" for="select2">Produkt:</label> 
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select1', 'select3')" multiple name="select2[]" id="select2">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option> 
          <option value="produkt3">Produkt 3</option> 
          <option value="produkt4">Produkt 4</option>                        
        </select>
      </div>
    </div>
  </div>
  <!-- TAB 3-->
  <div id="tab3" class="tab-pane fade">    
    <div class="form-group">
      <label class="control-label col-sm-3" for="select3">Produkt:</label> 
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select1', 'select2')" multiple name="select3[]" id="select3">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option> 
          <option value="produkt3">Produkt 3</option> 
          <option value="produkt4">Produkt 4</option>                        
        </select>
      </div>
    </div>
  </div>

</div>

</div>

现在结合了整天怎么做funkcja（这个'select2'，'select3'） - 从选择添加“禁用”调用onchange到其他选项卡中其余选项中的相同选项。我认为看起来会像这样，但它不起作用：

function funkcja(element, select2, select3) 
{
    var select2 = document.getElementById(select2);
    var select3 = document.getElementById(select3);
    for (var i = 0; i < element.length; i++) 
    {
        if (element.options[i].selected) 
        {
            select2.options[i].disabled;
            select3.options[i].disabled;
        }
    }
}

我曾试图通过jQuery达到同样的效果，但也没有成功。我真的需要帮助解决这个问题

Answer 1

您使用

select2.options [I] .disabled

使用此语句，您将获得disabled的值。所以你必须将值更改为true / false。

select2.options[i].disabled = true; // disabled

select2.options[i].disabled = false; // not disabled

Answer 2

这里是jquery版本：

$('select').click(function()
{
$('select').find("option").prop("disabled",false); // clear all disabled options
    var $this_select_id = this.id;  // get the id of the select which was clicked.
    $(this).find("option:selected").each(function() // iterate through the current selected select tag to see which options are selected
    {
        var option = $(this); // get the option object
        $('select').each(function() // iterate through select to find the corresponding selected options.
        {
            if(this.id != $this_select_id) // ignore if the id is equal to the id of the one which was clicked
            {
                var optionVal = $(option).val(); // get the value of the option 
                $(this).find("option[value='" + optionVal + "']").prop("disabled",true); // find the same option in the other select and disable them
            }
        });
    });
});

http://jsfiddle.net/j6um1sq2/5/

Answer 3

如果您正在使用jquery选择的插件，则必须触发chosen:updated事件才能应用您正在执行的更改，请尝试以下代码：

select2.options[i].disabled = true;
select2.options[i].trigger('chosen:updated');

select3同样如此，希望这会有所帮助。

<强> Example fiddle

Answer 4

使用一点点jquery，这很容易实现。

此外，如果撤消项目的选择

，这些将重置其他选择状态

＆＃13;

function funkcja(sel, sel1, sel2) {
  var options = $(sel).find("option");
  var options1 = $("#" + sel1).find("option");
  var options2 = $("#" + sel2).find("option");
  $.each(options, function(index) {
    var opt = findOption(options1, $(this).val());
    disableProduct(opt, this);
    opt = opt = findOption(options2, $(this).val());
    disableProduct(opt, this);
  });
}


function disableProduct(opt, opt1) {
  if (opt !== undefined || !$(opt).is(":disable")) {
    if ($(opt1).is(":selected"))
      $(opt).attr('disabled', 'true');
    else
      $(opt).removeAttr('disabled');
  }
}

function findOption(opts, val) {
  for (var i = 0; i < opts.length; i++) {
    if (opts[i].value === val)
      return opts[i];
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="tab-content">

  <!-- TAB 1 -->
  <div id="tab1" class="tab-pane fade in active">
    <div class="form-group">
      <label class="control-label col-sm-3" for="select1">Produkt:</label>
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select2', 'select3');" multiple name="select1[]" id="select1">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option>
          <option value="produkt3">Produkt 3</option>
          <option value="produkt4">Produkt 4</option>
        </select>
      </div>
    </div>
  </div>
  <!-- TAB 2-->
  <div id="tab2" class="tab-pane fade">
    <div class="form-group">
      <label class="control-label col-sm-3" for="select2">Produkt:</label>
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select1', 'select3');" multiple name="select2[]" id="select2">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option>
          <option value="produkt3">Produkt 3</option>
          <option value="produkt4">Produkt 4</option>
        </select>
      </div>
    </div>
  </div>
  <!-- TAB 3-->
  <div id="tab3" class="tab-pane fade">
    <div class="form-group">
      <label class="control-label col-sm-3" for="select3">Produkt:</label>
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select1', 'select2');" multiple name="select3[]" id="select3">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option>
          <option value="produkt3">Produkt 3</option>
          <option value="produkt4">Produkt 4</option>
        </select>
      </div>
    </div>
  </div>

</div>

＆＃13;

编辑：注意到，如果我在select3上选择了product3而在select2中禁用了product1，则会重新启用它。所以我纠正了检查道具的状态只是启用了

多选，如何将“禁用”添加到其他多选

4 个答案: