Jquery显示隐藏后无法处理选择选项答案

【问题标题】：Jquery show not working on select options after hidingJquery显示隐藏后无法处理选择选项
【发布时间】：2022-01-11 12:41:06
【问题描述】：

考虑以下引导选择选择器：

<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() 都没有效果。我错过了什么？

【问题讨论】：

标签： jquery bootstrap-4 jquery-selectors

【解决方案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>

【讨论】：

使用selectpicker类，结果不同，子select中的选项不显示。
@Debunkar 我添加了 jsfiddle，它现在可以工作了
嗨，亚历克斯。我已经确定了问题的根本原因，似乎选择上的“数据大小”属性（不在示例中）基本上是在触发问题。更具体地说，当我在 select 上有这个属性时，每当我尝试隐藏选项时，包括 select 中的第一个选项，它都会隐藏所有内容。如果我不隐藏第一个选项，它会正常工作。但是，如果我删除 data-size 属性，一切正常。我不确定它为什么会有这种行为。有什么想法吗？
...我使用了最新版本的 bootstrap select，现在看起来还不错...感谢您的宝贵时间 Alex。

【解决方案2】：

问题出在这一行

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

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

【讨论】：