Question

我只想根据更改后的第一个下拉值（父项）仅显示第二个下拉项（子项）属性数据值中的选项，并隐藏其余选项。

$('.custom_select').select2()

$('select[name=parent]').on('change', function(){
  // show only options from child equals to this.val()
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<select class="custom_select" name="parent">
  <option value="1">example 1</option>
  <option value="1">example 1</option>
  <option value="2">example 2</option>
  <option value="3">example 3</option>
</select>
<select class="custom_select" name="child">
  <option data-value="1">child 1</option>
  <option data-value="1">child 1</option>
  <option data-value="2">child 2</option>
  <option data-value="3">child 3</option>
</select>

Answer 1

您可以获取第一个选择框的值，然后将其与第二个选择框的option进行比较，具体取决于该隐藏或显示选项，即：

$('.custom_select').select2()

$('select[name=parent]').on('change', function() {
  //getting value
  var val = $(this).val();
  //looping through options
  $('select[name=child] option').each(function() {
    var self = $(this);
    if (self.attr("data-value") == val) {
      //if the option have that values show option
      $("select[name=child] option[data-value='" + val + "']").prop('disabled', false);

    } else {
      //other options which don't have selected value hide them
      $("select[name=child] option:not(:contains('" + val + "'))").prop('disabled', true);

    }
  });
});

.select2-container--default .select2-results__option[aria-disabled=true] {
  display: none;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<select class="custom_select" name="parent">
  <option value="1">example 1</option>
  <option value="2">example 2</option>
  <option value="3">example 3</option>
</select>
<select class="custom_select" name="child">
  <option data-value="1">child 1</option>
  <option data-value="2">child 2</option>
  <option data-value="3">child 3</option>
</select>

Answer 2

$(document).ready(function() {
    $("#child").children('option:gt(0)').hide();
    $('select').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });
})

function setOption() {
    var id=$("#parent").val();
    $('#child').select2('destroy');
        $("#child").children('option').hide();
        $("#child").children("option[data-value^=" +id + "]").show();
        $('#child').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });
        
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>




<select class="custom_select" name="parent" id="parent" onchage=setOption()>
  <option value="1">example 1</option>
  <option value="1">example 1</option>
  <option value="2">example 2</option>
  <option value="3">example 3</option>
</select>
<select class="custom_select" name="child" id="child">
  <option data-value="1">child 1</option>
  <option data-value="1">child 1</option>
  <option data-value="2">child 2</option>
  <option data-value="3">child 3</option>
</select>

根据第一个值在第二个Select2下拉菜单中显示选项

2 个答案: