Question

我的jQuery Mobile页面上有以下表单字段。我想最初隐藏元素，然后如果用户选择值为“其他”的选项，则使用.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 INSIDE页面：

 // $( '#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站点上没有。

Answer 1

这适合你吗？

基于选择字段的jQuery Mobile Show / Hide Form输入

1 个答案: