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添加值，并在要隐藏的元素中使用与类相同的值，

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

将umrah类添加到您的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

这是你想做的吗？（在下面运行）

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: