我的 jQuery Mobile 页面上有以下表单字段。我想最初隐藏该元素,然后如果用户选择 value="Other"
的选项,则将其 .show()这是我的 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();
}
});
});
});
在这个 working example 中工作正常.除了 $(".page").live('pageinit', function() {
在我的 JS 代码的顶部使其在页面加载后工作?它在上面的示例链接中工作正常,但在我的 jQuery Mobile 网站上却不行。
最佳答案
这对你有用吗:
- > http://jsfiddle.net/Qe6G4/1/
- > http://jsfiddle.net/Qe6G4/2/ (优化)
- > http://jsfiddle.net/Qe6G4/3/ (有另一个输入)
关于javascript - jQuery Mobile 显示/隐藏基于选择字段的表单输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9619552/