javascript - 仅在选定的特定值上显示输入文本

Question

我有一个表单，它有一个选择、一个输入(文本)、一个日期选择器和提交按钮。我想仅当我在选择上选择一个特定选项时才显示输入文本。我搜索并找到了类似的解决方案(带有 radio 输入)，我制作了一些模组，但不幸的是它不起作用。我的 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

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