javascript - 显示包含特定字符串的 div

Question

我有一个包含 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>

这是不起作用的 jQuery 代码。

$(document).ready(function () {
  $('#level').on('change', function () {
    var val = $(this).val()
    if (val == '00') {
      $(".textIc").show();
    } else {
      $("div p:not (:contains('val')").parent('textIc').hide();
    }
  });
});

Answer 1

这里有一个解决方案:- https://jsfiddle.net/xsugywzs/3/

$(document).ready(function () {
  $('#level').on('change', function () {
    var val = $(this).val()
    if (val == '00') {
     	$("div p").show()
    } else {
      $("div p:contains("+val+")").show();
     $("div p:not(:contains("+val+"))").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      <b>Primaire</b>
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
   </p>
   <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
     <b>Secondaire</b>
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
   </p>
   <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
     <b>Primaire et secondaire</b>
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
   </p>
   <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
   </p>
 </div>