選択した特定の値にのみ入力テキストを表示

私は、1つの選択、1つの入力（テキスト）、日付ピッカー、および送信ボタンを持つフォームを持っています。私は、選択した1つの特定のオプションを選択したときにのみ、入力テキストを表示したいと思います。私はsearcedと私は、私はいくつかの改造をしたましたが、残念ながらそれはdoes'nt作品は.. 私のHTMLは、それがどのように見える形成（ラジオ入力と）同様のソリューションを見つけまし：選択した特定の値にのみ入力テキストを表示

<select class="form-control" name="bulk_options_cust" id="action_sel"> 
<option value="">Choose..</option> 
<option value="bulkCreateRdv">Option 1</option> 
<option value="bulkCreateCall">Option 2</option> 
</select> 
<input class="form-control" type="text" name="fav_filter" id=""> 
<div class="col-xs-4"> 
<input type="date" id="datepicker" name="new_date" value=""> 
<button class="btn btn-success" type="submit"> 
submit</button> 
</div>

変更したスクリプト私が見つけましということである：誰もが私にエラーを見つけるか、別のソリューションを提案することができる場合、それは私にとって素晴らしいものになるよう

$(document).ready(function() { 
    var h = $("#fav_filter"); 
    $("#action_sel select").change(function() { 
    if (this.checked && this.value == "bulkCreateCall") { 
     h.show(); 
    } else { 
     h.hide(); 
    } 
    }).change() 
});

私はJavascriptの知識がありません。

乾杯！

出典

2017-04-06 gadam76

このフィドルを使用してください。私はそれを削除しようとします。私はそれを謝罪しました; sは私の最初の質問です:)。 – gadam76

$(document).ready(function() { 
 
    var h = $("#fav_filter"); 
 
    $("#action_sel").change(function() { 
 
    if ($(this).prop("value") === "bulkCreateCall") { 
 
     h.show(); 
 
    } else { 
 
     h.hide(); 
 
    } 
 
    }).change() 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select class="form-control" name="bulk_options_cust" id="action_sel"> 
 
<option value="">Choose..</option> 
 
<option value="bulkCreateRdv">Option 1</option> 
 
<option value="bulkCreateCall">Option 2</option> 
 
</select> 
 
<input class="form-control" type="text" id="fav_filter" id=""> 
 
<div class="col-xs-4"> 
 
<input type="date" id="datepicker" name="new_date" value=""> 
 
<button class="btn btn-success" type="submit"> 
 
submit</button> 
 
</div>

出典

2017-04-06 23:10:33 SunriseM

Thanx SunriseM！それはうまく動作します！私は何かもっと質問したいと思います：私のCMSの一般的なヘッダー文書の同じ文書ですか？ – gadam76

あなたの決断ですが、私は体の最後の部分にスクリプトを置いて、htmlが問題なく最初に読み込まれるようにします。これもお読みください：https://developers.google.com/speed/docs/insights/BlockingJS – SunriseM

ありがとうございました！ – gadam76

どのようにフォームを送信していますか？あなたのhtmlにはフォームタグはありません。あなたはAJAXを使うつもりですか？次の作業は、必要に応じて変更してください。私はそれは無関係です私はそれを働いmは私のプロジェクトは、PHPのSしかし、あなたは右であるため、それを入れましhttps://jsfiddle.net/MaineMathMan/cufkscx8/

<html> 
<head> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
</script> 

<script> 
$(document).ready(function(){ 

    $("#action_sel").change(function() 
      { 
      if (this.value=="bulkCreateCall") 
       { $("#showMe").show(); } 
       else { $("#showMe").hide(); } 
      }); 
    }); 
</script> 
</head> 

<select class="form-control" name="bulk_options_cust" id="action_sel"> 
<option value="">Choose..</option> 
<option value="bulkCreateRdv">Option 1</option> 
<option value="bulkCreateCall">Option 2</option> 
</select> 
<div id="showMe" style="display: none;"> 
<input class="form-control" type="text" name="fav_filter" id=""> 
</div> 
<div class="col-xs-4"> 
<input type="date" id="datepicker" name="new_date" value=""> 
<button class="btn btn-success" type="submit"> 
submit</button> 
</div> 
</html>

出典

2017-04-06 23:05:31 Vbudo

こんにちはVbudo ..申し訳ありません私はポストメソッドを介してそれを送信します.. – gadam76

フィドルを使用して、テキスト入力を表示するオプション2を選択します。あなたがバニラjsを使用してそれをしたい場合私に教えてください。 – Vbudo

選択した特定の値にのみ入力テキストを表示

答えて

関連する問題