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

时间:2015-11-10 20:32:22

标签: javascript jquery multi-select

我有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达到同样的效果,但也没有成功。我真的需要帮助解决这个问题

4 个答案:

答案 0 :(得分:1)

您使用

  

select2.options [I] .disabled

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

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

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

答案 1 :(得分:1)

这里是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/

答案 2 :(得分:0)

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

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

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

<强> Example fiddle

答案 3 :(得分:0)

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

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

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

&#13;
&#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;
&#13;
&#13;

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