Question

我有一个表单，它有一个选择，一个输入（文本），一个日期选择器和提交按钮。我只想在选择一个特定选项时显示输入文本。我已经解释了，我发现了一个类似的解决方案（带无线电输入），我做了一些改装，但遗憾的是它不起作用.. 我的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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: