jQuery

Question

此菜单有四个下拉选项：

<select name="menu-542" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Maak uw keuze">Maak uw keuze</option>
<option value="Umrah Meivakantie">Umrah Meivakantie</option>
<option value="Umrah ramadan">Umrah ramadan</option>
<option value="Umrah individueel">Umrah individueel</option>
</select>

选择"Umrah Meivakantie"时，我希望两个字段消失，即：

<p id="vertrek-datum" class="umrah">Vertrekdatum <br>
   <span class="wpcf7-form-control-wrap date-465"><input type="text" name="date-465" value="" size="40" class="wpcf7-form-control wpcf7-date hasDatepicker" id="dp1424688990864"> </span> </p>

和

<p id="eind-datum" class="umrah">Einddatum<br>
   <span class="wpcf7-form-control-wrap date-466"><input type="text" name="date-466" value="" size="40" class="wpcf7-form-control wpcf7-date hasDatepicker" id="dp1424688990865"> </span> </p>

Answer 1

您可以为 Umrah Meivakantie 添加值，并在要隐藏的元素中使用与 class 相同的值，例如

 <option value="Umrah Meivakantie">Umrah Meivakantie</option>

将副朝 class 添加到您的 p-elements 赞中，

<p id="vertrek-datum" class="umrah">Vertrekdatum <br />
   [date date-465 date-format:mm/dd/yy] </p>

然后更改您的下拉元素尝试代码，

$(function(){
    $('select[name="menu-542"]').on('change',function(){
       if(this.value=='Umrah Meivakantie'){
          $('#vertrek-datum,#eind-datum').hide();
       }
    });
});

$(function(){
    $('select[name="menu-542"]').on('change',function(){
       if(this.value=='Umrah Meivakantie'){
          $('#vertrek-datum,#eind-datum').hide();
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="menu-542" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Maak uw keuze">Maak uw keuze</option>
<option value="Umrah Meivakantie">Umrah Meivakantie</option>
<option value="Umrah ramadan">Umrah ramadan</option>
<option value="Umrah individueel">Umrah individueel</option>
</select>

<p id="vertrek-datum" class="umrah">Vertrekdatum <br>
   <span class="wpcf7-form-control-wrap date-465"><input type="text" name="date-465" value="" size="40" class="wpcf7-form-control wpcf7-date hasDatepicker" id="dp1424688990864"> </span> </p>
<p id="eind-datum" class="umrah">Einddatum<br>
   <span class="wpcf7-form-control-wrap date-466"><input type="text" name="date-466" value="" size="40" class="wpcf7-form-control wpcf7-date hasDatepicker" id="dp1424688990865"> </span> </p>

Answer 2

这是你想做的吗？ (运行在下)

var $umrah = $(".umrah");

$("select").on("change", function(){
  if( $(this).val()=='Umrah Meivakantie'){
    $umrah.hide();
  } else {
    $umrah.show();
  } 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="menu-542" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="Maak uw keuze">Maak uw keuze</option>
  <option value="Umrah Meivakantie">Umrah Meivakantie</option>
  <option value="Umrah ramadan">Umrah ramadan</option>
  <option value="Umrah individueel">Umrah individueel</option>
</select> If you select "Umrah Meivakantie" it will hide two fields.
<br>
<p id="vertrek-datum" class="umrah">Vertrekdatum <br>
   <span class="wpcf7-form-control-wrap date-465"><input type="text" name="date-465" value="" size="40" class="wpcf7-form-control wpcf7-date hasDatepicker" id="dp1424688990864"> </span> </p>

<p id="eind-datum" class="umrah">Einddatum<br>
   <span class="wpcf7-form-control-wrap date-466"><input type="text" name="date-466" value="" size="40" class="wpcf7-form-control wpcf7-date hasDatepicker" id="dp1424688990865"> </span> </p>

<p >Some other field<br>
   <span class="wpcf7-form-control-wrap date-466"><input type="text" name="date-466" value="" size="40" class="wpcf7-form-control wpcf7-date hasDatepicker" id="dp1424688990865"> </span> </p>

<p>Some other field<br>
   <span class="wpcf7-form-control-wrap date-466"><input type="text" name="date-466" value="" size="40" class="wpcf7-form-control wpcf7-date hasDatepicker" id="dp1424688990865"> </span> </p>

jQuery - 选择值时使表单元素消失

jQuery - Make form elements disappear when value is selected

wordpress