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/

＆＃13;

$(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();
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

需要像下面这样做： -

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

演示工作示例： -

＆＃13;

$(document).ready(function(){
  $('#level').on('change', function() {
    var val = $(this).val();
    if ( val == '00'){
      $(".textIc").show();
    }else{
      $('.textIc').each(function(){
        if($(this).children("p").text().indexOf(val) !==-1){
          $(this).show();
        }else{
          $(this).hide();
        }
      });
    }
  });
});

＆＃13;

<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="Primary">Primary</option>
  <option value="Secondary">Secondary</option>
  <option value="Primary and Secondary">Primary and Secondary</option>
</select>

<div class="textIc">

  <p>Primary</p>
  <p>King</p>
  <p>Queen</p>

</div>

<div class="textIc">

  <p>Secondary</p>
  <p>Secondary King</p>
  <p>Secondary Queen</p>

</div>

＆＃13;

工作小提琴： - https://jsfiddle.net/hbx2hqos/

显示包含特定String的div

2 个答案: