选择框上的兄弟姐妹不起作用？

Question

如果已在其他框中选择，我想禁用该选项。 为此，我为所有框编写了一个通用类“my_select_class”，并且我正在调用 $('my_select_class').change() 事件，该事件被触发，但其他孩子的兄弟姐妹循环“.my_select_class”无法正常工作.

我的代码是：

<div class="modal-body">
  <div class="col-md-5">
    <div class="form-group">
     <label class="control-label">Member</label>
     <select class="form-control my_select_class" id="member0" name="member_list[0][id]" required="">
        <option value="">Select</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option> 
     </select>
    </div>
  </div>
  <div class="col-md-5">
   <div class="form-group">
     <label class="control-label">Role</label>
     <select class="form-control" name="member_list[0][p_role]" required="">
       <option value="">Select</option>
       -------------------------
       -------------------                                           
     </select>
   </div>
  </div>
  <div id="lopdisp1" style="display: block;">
    <div class="col-md-5">
    <div class="form-group">
     <label class="control-label">Member</label>
     <select class="form-control my_select_class" id="member1" name="member_list[1][id]" required="">
        <option value="">Select</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option> 
     </select>
    </div>
  </div>
  <div class="col-md-5">
    <div class="form-group">
      <label class="control-label">Role</label>
      <select class="form-control" name="member_list[1][p_role]" required="">
        <option value="">Select</option>
        -------------------------
        -------------------                                           
      </select>
    </div>
   </div>
  </div>
  <div id="lopdisp2" style="display: block;">
   -------------------------
   -----------------------
  </div>
  <div id="lopdisp3" style="display: block;">
   -------------------------
   -----------------------
  </div>

我的JS代码是：

$(document).on('change', '.my_select_class', function(){
 var value = $(this).val();
 $(this).siblings('.my_select_class').children('option').each(function() {
    if ( $(this).val() === value ) {
        $(this).attr('disabled', 'disabled').siblings().removeAttr('disabled');   
    }
 });
});

我想要这样：http://jsfiddle.net/dZqEu/
谁能告诉我我的代码有什么问题。谢谢。

Answer 1

您使用了多个id=member，这是无效的HTML。

我所做的是使用data-* 属性对选择进行分组。所有应该相互交互的都具有相同的data-type。

我评论了 role 选择了，而他们没有选项或值。

请查看JS代码中的cmets进行澄清。

$(document).on('change', '.my_select_class', function() {
  var type = $(this).data('type'),
      items = $('select[data-type="'+type+'"]');
      
  items.find('option').removeAttr('disabled');
  items.each(function() {
    items
      .not(this)
      .find('option[value="'+$(this).val()+'"]')
      .attr('disabled', 'disabled');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
  <div class="col-md-5">
    <div class="form-group">
      <label class="control-label">Member</label>
      <select class="form-control my_select_class" data-type="member" name="member_list[0][id]" required="">
        <option value="">Select</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option> 
     </select>
    </div>
  </div>
  <!--div class="col-md-5">
   <div class="form-group">
     <label class="control-label">Role</label>
     <select class="form-control" name="member_list[0][p_role]" required="">
       <option value="">Select</option>
       -------------------------
       -------------------                                           
     </select>
   </div>
  </div-->
  <div id="lopdisp1" style="display: block;">
    <div class="col-md-5">
      <div class="form-group">
        <label class="control-label">Member</label>
        <select class="form-control my_select_class" data-type="member" name="member_list[1][id]" required="">
        <option value="">Select</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option> 
     </select>
      </div>
    </div>
    <!--div class="col-md-5">
   <div class="form-group">
     <label class="control-label">Role</label>
     <select class="form-control" name="member_list[1][p_role]" required="">
       <option value="">Select</option>
       -------------------------
       -------------------                                           
     </select>
   </div>
  </div>
 </div-->
    <div id="lopdisp1" style="display: block;">
      ------------------------- -----------------------
    </div>

编辑

我清理了所有不需要的额外代码，以使代码更易于理解...

$(document).on('change', '.my_select_class', function() {
  var type = $(this).data('type'),
      items = $('select[data-type="'+type+'"]');
      
  items.find('option').removeAttr('disabled');
  items.each(function() {
    items
      .not(this)
      .find('option[value="'+$(this).val()+'"]')
      .attr('disabled', 'disabled');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="control-label">Member</label>
<select class="form-control my_select_class" data-type="member" name="member_list[0][id]" required>
  <option value="">Select</option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option> 
</select>

<label class="control-label">Member</label>
<select class="form-control my_select_class" data-type="member" name="member_list[1][id]" required>
  <option value="">Select</option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option> 
</select>

<label class="control-label">Member</label>
<select class="form-control my_select_class" data-type="member" name="member_list[1][id]" required>
  <option value="">Select</option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option> 
</select>

Answer 2

您的 my_select_class 与 my_select_class 没有兄弟姐妹。你必须向上 DOM，然后找到 my_select_class。