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

我有一个窗体，它有一个选择，一个输入（文本），日期选择器和提交按钮。我只想在选择一个特定选项时才显示输入文本。我已经searced，我发现了一个类似的解决方案（与无线输入），我已经做了一些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的毫不知情，所以如果任何人能发现我的错误或建议另一种解决方案将是非常适合我。

干杯！

来源

2017-04-06 gadam76

我已经把它，因为我的项目，我米工作是S于PHP的，但你是正确的它是无关紧要的。我会（尝试）将其删除。我很抱歉，这是我的第一个问题.. :) – 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

它是你的决定，但我更愿意把脚本放在body的最后部分，所以html首先加载没有问题。你也应该阅读：https://developers.google.com/speed/docs/insights/BlockingJS – SunriseM

好的非常感谢你！ – gadam76

您如何发送表单？您的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>

来源

2017-04-06 23:05:31 Vbudo

你好Vbudo ..对不起，我会通过邮政方式发送.. – gadam76

使用小提琴和选择选项2来看到文本输入。如果你想使用香草js让我知道。 – Vbudo

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

回答

相关问题