[WordPress] jQuery – 消えるフォーム要素の値を選択します。

スポンサーリンク

質問

このメニューには 4 つのドロップ ダウン オプション:

<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」が選択されているときに消えて、すなわち 2 つのフィールドしたい:

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

答え

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>

ドロップダウン要素の onchange、のようなコードを試してくださいと

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

の答え

やりたいですか?(以下実行)

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

$("select").on("change", function(){
  
  var a = $(this).val();
  
  if(a=='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>

http://stackoverflow.com/questions/28671228/jquery-make-form-elements-disappear-when-value-is-selected

スポンサーリンク

Leave a Reply