Javascript JQuery如何基于所选选项标记生成更多表单字段
我正在构建一个web表单,我希望能够允许用户从下拉菜单中选择一个选项,并且根据他们选择的值,将生成一个包含与该选项相关的更多字段的div。我已经为另一个项目成功地用一个选项实现了这段代码。我回收了这个项目的代码,并对其进行了修改,以适应多种选择,但到目前为止,我还没有成功地让一个工作产品运行 这里有一些我一直在使用的源代码来说明我的观点 JQuery脚本Javascript JQuery如何基于所选选项标记生成更多表单字段,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在构建一个web表单,我希望能够允许用户从下拉菜单中选择一个选项,并且根据他们选择的值,将生成一个包含与该选项相关的更多字段的div。我已经为另一个项目成功地用一个选项实现了这段代码。我回收了这个项目的代码,并对其进行了修改,以适应多种选择,但到目前为止,我还没有成功地让一个工作产品运行 这里有一些我一直在使用的源代码来说明我的观点 JQuery脚本 $(document).ready(function(){ $("#more_info_bus").hide();
$(document).ready(function(){
$("#more_info_bus").hide();
$("#more_info_bus").attr("disabled", "disabled");
$("#more_info_train").hide();
$("#more_info_train").attr("disabled", "disabled");
$("#more_info_tram").hide();
$("#more_info_tram").attr("disabled", "disabled");
$("#transport_type").change(function(){
var val = $(this).val;
$("#more_info_bus input").attr("enabled",(val=="Bus")?"":"enabled");
(val=="Bus")?$("#more_info_bus").show():$("#more_info_bus").hide();
$("#more_info_train input").attr("enabled",(val=="Train")?"":"enabled");
(val=="Train")?$("#more_info_train").show():$("#more_info_train").hide();
$("#more_info_tram input").attr("enabled",(val=="Tram")?"":"enabled");
(val=="Tram")?$("#more_info_tram").show():$("#more_info_tram").hide();
});
});
HTML代码(缩短为两个div,而不是所有选项,但你知道了
<label>Is the venue accessible by public transport via:</label> <br />
<select name="transport_type" id="transport_type">
<option disabled selected>Please select a transport type...</option>
<option value="Bus">Bus</option>
<option value="Train">Train</option>
<option value="Tram">Tram</option>
<option value="Taxi">Taxi</option>
<option value="Other">Other</option>
</select> <br /> <br />
<!--HIDDEN DIVS THAT WILL APPEAR UPON SELECTION OF THE VALUES IN THE SELECT ABOVE -->
<div id="more_info_bus">
<label>Bus: Frequency of service</label>
<input type="text" name="bus_freq" value="<?php echo $results['bus_freq']; ?>"/><br />
<label>Bus: route numbers(s)</label>
<input type="text" name="bus_routes" value="<?php echo $results['bus_routes'];?>"/> <br />
<label>Bus: Distance from stop to venue (in meters)</label>
<input type="text" name="bus_dist" value="<?php echo $results['bus_dist'];?>"/> <br />
<label>Bus: How accessible is the route from stop to venue?</label>
<textarea cols="50" rows="2" name="bus_access"><?php echo $results['bus_access'];?></textarea> <br />
</div>
<div id="more_info_train">
<label>Train: Frequency of service</label>
<input type="text" name="train_freq" value="<?php echo $results['bus_freq']; ?>"/><br />
<label>Train: route numbers(s)</label>
<input type="text" name="train_routes" value="<?php echo $results['bus_routes'];?>"/> <br />
<label>Train: Distance from stop to venue (in meters)</label>
<input type="text" name="train_dist" value="<?php echo $results['bus_dist'];?>"/> <br />
<label>Train: How accessible is the route from stop to venue?</label>
<textarea cols="50" rows="2" name="train_access"><?php echo $results['bus_access'];?></textarea> <br />
</div>
公共交通是否可通过:
请选择一种传输类型。。。
公共汽车
训练
有轨电车
出租车
其他
巴士:班次
列车:班次
有人知道为什么我的div
部分保持隐藏吗?当用户选择每个div各自的值时,它们不会出现
var val = $(this).val;
.val()是一个函数,因此现在typeof val=='function'
。
您必须使用:
var val = $(this).val();
您也可以只做
这个.value
(没有jquery,在本例中不是函数)doh!非常感谢,我对代码逻辑和所有内容都非常恼火,这是一个语法错误。现在发帖子感觉很傻:')学会使用console.log(),这会立即帮助您……;)或者更好:学习使用浏览器的开发工具和断点:)所有非常有用的建议谢谢大家!需要停止轻易放弃去窃听:P会在时间允许的情况下接受你的答案。为什么你要在一个div上设置一个属性disabled
?这没用。如果你需要一个指示符,你应该使用一个类。我认为以后需要启用所述div的输入?既不需要禁用也不需要启用语句。你最好把那些行擦掉。好的,谢谢你的提示。