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

Question

如果已在其他框中选中，我想禁用选项。 为此，我写了一个普通的课，说'my_select_class＆＃39;对于所有盒子，我正在调用$（＆＃39; my_select_class＆＃39;）。change（）事件事件被触发但是兄弟姐妹循环彼此的孩子＆＃39; .my_select_class＆＃39;工作不正常。

我的代码是：

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