jQuery Mobile根据选择字段显示/隐藏表单输入
jQuery Mobile Show/Hide Form input based on select field
jQuery Mobile页面上有以下表单字段。我想一开始隐藏元素,然后如果用户选择值为"Other"的选项,就显示它
这是我的HTML:
<div data-role="fieldcontain" class="no-field-separator">
<select name="plan_height" id="plan_height" data-native-menu="false">
<option>Plan Height</option>
<option value="Standard 6foot 2inch">Standard 6'2"</option>
<option value="Other">Specify in Notes</option>
</select>
</div>
<div id="specify_plan_height_box" style="display:none;">
<div data-role="fieldcontain" class="ui-hide-label no-field-separator">
<label for="specify_plan_height">Specify Plan Height</label>
<input type="text" id="specify_plan_height" name="specify_plan_height" placeholder="Specify Plan Height" maxlength="50" />
</div>
</div>
这是我在页面内的JS:
// $( '#machine-guarding-page' ).live( 'pageinit',function(event) {
$( document ).bind( "pageinit", function( event, data ) {
$('#plan_height').change(function() {
var planHeightVal = $("#plan_height option:selected").val();
var sphb = $("#specify_plan_height_box");
sphb.hide();
if (planHeightVal == "Other") {
sphb.show();
}
});
});
});
在这个工作示例中,它工作得很好。我需要$(".page").live('pageinit', function() {
以外的东西吗在我的JS代码顶部,让它在页面加载后工作?它在上面的示例链接中工作得很好,但在我的jQueryMobile网站上不起作用。
这对你有用吗:
- http://jsfiddle.net/Qe6G4/1/
- http://jsfiddle.net/Qe6G4/2/(已优化)
- http://jsfiddle.net/Qe6G4/3/(带有另一个输入)
相关文章:
- 使用javascript取消隐藏和隐藏表单中的某些元素
- 如何使用javascript隐藏表单的选项
- 模拟隐藏表单提交&使用JavaScript重定向以实现安全支付
- 未执行Ajax隐藏表单提交验证
- 在同一个html页面中显示servlet响应而不隐藏表单
- 自动提交隐藏表单值
- 如何筛选出发布的隐藏表单输入类型
- 如何在angularjs中提交后隐藏表单
- 如果用户登录了Backbone,JavaScript,如何显示/隐藏表单
- 显示/隐藏表单区域(im 使用引导程序)
- 如何隐藏表单并仅在选中时显示
- 如何通过隐藏表单在同一页面中显示表单输出
- 如何在同一窗口中显示表单输出并隐藏表单
- 使用 jquery 选择选项时隐藏表单选项
- 当一组元素的所有元素都具有特定值时,如何隐藏表单元素
- 如果禁用了javascript,则隐藏表单
- 选择下拉列表中的值时隐藏表单
- 无法隐藏/取消隐藏表单内的按钮
- 如何根据最后选择的选项(单选按钮)使用 javascript 隐藏表单输入
- 显示和隐藏表单