Jquery 显示隐藏后无法处理 select 选项

Question

考虑以下 bootstrap 选择器：

<select id="parent" class="selectpicker">
<option value="1">Parent 1</option>
<option value="2">Parent 2</option>
</select>

<select id="child" class="selectpicker">
<option value="1">Child - Parent 1</option>
<option value="2">Child - Parent 2</option>
</select>

 $("#parent").on('change', function (e) { 
   var parentId = $(this).val();
   $("#child option").each((i,a) => {
      var childParentId = $(a).value();
      if(childParentId != parentId) {
         $(a).hide();
       } else { $(a).show() }
  });
   $("#child").selectpicker("refresh")
 });

无论我做什么，$(a).show() 都没有效果。我缺少什么？

Answer 1

您需要使用 $(this) 来获取 dom 而不是 $(a)

更新：jsfiddle

 $("#parent").on('change', function (e) { 
   var parentId = $(this).val();
   $("#child option").each(function() {
      var childParentId =  $(this).val();
      if(childParentId != parentId) {
          $(this).hide();
       } else { $(this).show() }
  });
   // $("#child").selectpicker("refresh")
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="parent" class="selectpicker">
<option value="1">Parent 1</option>
<option value="2">Parent 2</option>
</select>

<select id="child" class="selectpicker">
<option value="1">Child - Parent 1</option>
<option value="2">Child - Parent 2</option>
</select>

Answer 2

问题出在这一行

var childParentId = $(a).value();

你使用 value() 正确的语法是 val()

Jquery 显示隐藏后无法处理 select 选项

Jquery show not working on select options after hiding

jquery

jquery-selectors

bootstrap-4