代码之家 › 专栏 › 技术社区 › Prasad Patel

选择框上的同级不工作?

siblings children each select jquery

Prasad Patel · 技术社区 · 7 年前

如果已在其他框中选中,我希望禁用选项。

我的代码是:

<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/
谁能告诉我我的密码出了什么问题吗。谢谢

2 回复 | 直到 7 年前

Community SqlRyan 4 年前

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

我所做的是使用 data-* data-type .

我评论了 role 在没有选项或值的情况下选择“out”。

请查看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>

编辑

我清理了所有不需要的额外代码,使代码更容易理解。。。

$(文档)。on('change','。my\u select\u class',function(){
变量类型=$(this)。数据(“类型”),

项目。查找('选项')。removeAttr(“禁用”);
项目
.不是(这个)
.查找('option[value=“+$(this.val()+”])
.attr(“禁用”、“禁用”);
});

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

Nikos M. 7 年前

您的my\u select\u类与my\u select\u类没有同级。你必须进入DOM,然后找到my\u select\u类。