select 框上的兄弟姐妹不工作？

Question

如果已在其他框中选中，我想禁用该选项。为此，我为所有框写了一个通用的 class say 'my_select_class' 并且我正在调用 $('my_select_class').change() 事件事件被触发但是兄弟姐妹彼此循环children '.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

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

Answer 2

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

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

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

请查看 JS 代码中的注释以进行说明。

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

select 框上的兄弟姐妹不工作？

siblings on select boxes is not working?

jquery

select

each

children

siblings

编辑