Question

所以我有4个选择同一个类（没有ID），我想在我选择一个选项在其他选择中禁用它时，

<select name="column_type[]" class="form-control column_type">
 <option value="none">Ne pas Importer</option>
 <option value="mobile">Mobile</option><option value="mail">Email
 </option><option value="lname">Nom</option>
</select>
....

如果有人有任何想法我会非常感激。

Answer 1

根据我的理解，当您在select代码中选择一个选项时，会停用所有其他select代码：

JS ：

function onOptionChange(elem){
     var selects=document.getElementsByClassName("form-control column_type");
     for(var i=0;i<n;i++)
       if(selects[i]!=elem)
         selects[i].options[elem.selectedIndex].disabled=true;
    }

<强> HTML ：

<select name="column_type[]" class="form-control column_type" onChange="return onOptionChange(this)">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option><option value="mail">Email</option>
  <option value="lname">Nom</option>
</select>

如果那不是您想要的，我会编辑答案

Answer 2

尝试使用jQuery prop（）来禁用：

＆＃13;

$(function() {
  var column_type = $('.column_type');
  column_type.on('change', function() {
    var cur = $(this);
    $.each(column_type, function(_, dd) {
      dd = $(dd);
      if (cur != dd) {
        dd.find('option').eq(cur.prop('selectedIndex')).prop('disabled', true);
      }
    })
  }).eq(0).trigger('change');// fire event on page load
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="column_type[]" class="form-control column_type">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option>
  <option value="mail">Email
  </option>
  <option value="lname">Nom</option>
</select>
<select name="column_type[]" class="form-control column_type">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option>
  <option value="mail">Email
  </option>
  <option value="lname">Nom</option>
</select>
<select name="column_type[]" class="form-control column_type">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option>
  <option value="mail">Email
  </option>
  <option value="lname">Nom</option>
</select>
<select name="column_type[]" class="form-control column_type">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option>
  <option value="mail">Email
  </option>
  <option value="lname">Nom</option>
</select>

＆＃13;

检查选择的标签是否具有相同的值

2 个答案: