Javascript 显示包含特定字符串的div

我有一个包含3个选项的下拉列表。这些选项在多个div中得到响应。每个div的标题都是这3个选项中的任意一个。如何仅显示包含该特定下拉值的div

<select id="level">
    <option value="00" selected><b>Default</b></option>
    <option value="Primaire">Primary</option>
    <option value="Secondaire">Secondary</option>
    <option value="Primaire et secondaire">Primary and Secondary</option>
</select>

<div class="textIc">

    <p><?php  the_sub_field('left_section_heading'); ?></p>
    <p><?php  the_sub_field('left_section_subheading_1'); ?></p>
    <p><?php  the_sub_field('left_section_subheading_2'); ?></p>

</div>

---

这是一个解决方案：-

$（文档）.ready（函数（）{
$（'#level'）。关于（'change'，function（）{
var val=$（this.val（）
如果（val='00'）{
$（“部门p”）.show（）
}否则{
$（“div p:contains（“+val+”））.show（）；
$（“div p:not（：contains（“+val+”））.hide（）；
}
});
});

违约
主要的，重要的
次要的
小学和中学

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
Primair
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
二等兵
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
第一和第二
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

需要按以下方式执行：-

if ( val == '00'){
  $(".textIc").show();
}else{
  $('.textIc').each(function(){
    if($(this).children("p").text().indexOf(val) !==-1){
      $(this).show();
    }else{
      $(this).hide();
    }
  });
}

演示工作示例：-


$（文档）.ready（函数（）{
$（'#level'）。关于（'change'，function（））{
var val=$（this.val（）；
如果（val='00'）{
$（“.textIc”）.show（）；
}否则{
$（'.textIc'）。每个（函数（）{
if（$（this）.children（“p”）.text（）.indexOf（val）！=-1）{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
}
});
});

违约
主要的，重要的
次要的
小学和中学
初级的

国王

女王

次要的

次王

副皇后

$（“div p:not（：contains（“+val+”）））.parent（'textIc'）.hide（）；
concat var val
parent（'.textIc'）
missing
ni parent（）$（div p:not（：contains（“+val+”）））.parent（'.textIc'）.hide（））；使用了此选项。如果选择主选项，它仍然会显示所有div。它部分工作。现在它只显示下拉值，而不显示div的其余部分。div包含3行，并且只显示“主”。如何将其设置为显示完整的divdiv@Jon_Snow很高兴帮助你：）：）
if ( val == '00'){
  $(".textIc").show();
}else{
  $('.textIc').each(function(){
    if($(this).children("p").text().indexOf(val) !==-1){
      $(this).show();
    }else{
      $(this).hide();
    }
  });
}