jQuery相对下拉列表

Question

代码有2个下拉菜单->类别和子类别。子类别取决于类别的选择。现在，当我们有3对下拉菜单时，就会出现问题。就像我更改第一个下拉菜单的类别一样，它将更改所有3个子类别的下拉菜单值。

$(document).on('change', '.cat_select', function(e) {		        
  $(this).closest().find('.subcat_select').find('option:not(:first)').remove();
  $(this).closest().find('.subcat_select').append(data.html);
  //data.html comes from an ajax request.
  
});

<div class="row">
  <div class="col-sm-5">
    <select class="cat_select">
      <option>1</option>
      <option>1</option>
      <option>1</option>
    </select>
  </div>
  
  <div class="col-sm-5">
    <select class="subcat_select">
      // Result will come on selection of cat_select.
    </select>
  </div>
</div>

<div class="row">
  <div class="col-sm-5">
    <select class="cat_select">
      <option>1</option>
      <option>1</option>
      <option>1</option>
    </select>
  </div>
  
  <div class="col-sm-5">
    <select class="subcat_select">
      // Result will come on selection of cat_select.
    </select>
  </div>
</div>

<div class="row">
  <div class="col-sm-5">
    <select class="cat_select">
      <option>1</option>
      <option>1</option>
      <option>1</option>
    </select>
  </div>
  
  <div class="col-sm-5">
    <select class="subcat_select">
      // Result will come on selection of cat_select.
    </select>
  </div>
</div>

Answer 1

尝试一下；

HTML

<div>
  <select class="cat_select" data-parfor="1">
    <option>1</option>
    <option>1</option>
    <option>1</option>
  </select>

  <select class="subcat_select" data-subfor="1">
    // Result will come on selection of cat_select.
  </select>
</div>

<div>
  <select class="cat_select" data-parfor="2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>

  <select class="subcat_select" data-subfor="2">
    // Result will come on selection of cat_select.
  </select>
</div>

<div>
  <select class="cat_select" data-parfor="3">
    <option>1</option>
    <option>1</option>
    <option>1</option>
  </select>

  <select class="subcat_select" data-subfor="3">
    // Result will come on selection of cat_select.
  </select>
</div>

JS

$('.cat_select').on('change', function(e) {     
    var $select = $(this);
    var fornumber = $select.attr('data-parfor');
    $('.subcat_select[data-subfor="'+fornumber+'"]').find('option:not(:first)').remove();
    $('.subcat_select[data-subfor="'+fornumber+'"]').append(data.html);
    //data.html comes from an ajax request.
});

添加data-parfor属性和data-subfor属性使您可以使用相同的css类，这意味着更少的样式，而是JS中的选择器将被单击元素的属性值用作目标。

https://jsfiddle.net/xpvt214o/328854/

Answer 2

您可以在closest()调用中提供选择器，以获取特定的父级。另外，在这种情况下，.parent().parent()也应该起作用。

var data = { html: "<option>test</option>" }; //data.html comes from an ajax request.

$(document).on('change', '.cat_select', function(e) {
 $(this).closest('.row').find('.subcat_select').find('option:not(:first)').remove();
 $(this).closest('.row').find('.subcat_select').append(data.html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="col-sm-5">
    <select class="cat_select">
      <option>1</option>
      <option>1</option>
      <option>1</option>
    </select>
  </div>
  
  <div class="col-sm-5">
    <select class="subcat_select">
      // Result will come on selection of cat_select.
    </select>
  </div>
</div>

<div class="row">
  <div class="col-sm-5">
    <select class="cat_select">
      <option>1</option>
      <option>1</option>
      <option>1</option>
    </select>
  </div>
  
  <div class="col-sm-5">
    <select class="subcat_select">
      // Result will come on selection of cat_select.
    </select>
  </div>
</div>

<div class="row">
  <div class="col-sm-5">
    <select class="cat_select">
      <option>1</option>
      <option>1</option>
      <option>1</option>
    </select>
  </div>
  
  <div class="col-sm-5">
    <select class="subcat_select">
      // Result will come on selection of cat_select.
    </select>
  </div>
</div>