僅在選定的特定值上顯示輸入文本

Question

我有一個表單，它有一個選擇，一個輸入（文本），一個日期選擇器和提交按鈕。 我只想在選擇一個特定選項時顯示輸入文本。 我已經解決了，我發現了一個類似的解決方案（帶無線電輸入），我做了一些mods但不幸的是它確實沒有用..我的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一無所知，所以如果有人能夠找到我的錯誤或建議另一個解決方案，那對我來說會很棒。

干杯!

Answer 1

你是如何發送表格的？ 您的html中沒有表單標簽。 你打算用AJAX嗎？ 以下工作，根據需要進行修改。 使用這個小提琴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>

Answer 2

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

僅在選定的特定值上顯示輸入文本

問題描述

2 個解決方案

解決方案1
0 2017-04-06 23:05:31

解決方案2
0 已采納 2017-04-06 23:10:33

僅在選定的特定值上顯示輸入文本

問題描述

2 個解決方案

解決方案1 0 2017-04-06 23:05:31

解決方案2 0 已采納 2017-04-06 23:10:33

解決方案1
0 2017-04-06 23:05:31

解決方案2
0 已采納 2017-04-06 23:10:33