JQM 从表单选项中获取值

Posted 2023-05-09

【中文标题】JQM 从表单选项中获取值

【英文标题】：JQM Get a value from a form option

【发布时间】：2013-04-08 07:08:12

【问题描述】：

我有一些基本的 html 即；

    <select id="list1">
        <option value="1">Item1</option>
        <option value="2" selected="selected" >Item2</option>
    </select>
    <select id="list2">
        <option value="3">Item3</option>
        <option value="4">Item4</option>
    </select>

默认情况下，我将 #list2 隐藏并在将 #List1 更改为选项值 2 时显示...

    $('#list2').hide();

    $('#list1').on('change', function () 
     if ($(this).val() == '2') 
      $('#list2').parent('div').hide();
      else 
       $('#list2').parent('div').show();
    
    );

我想知道的是，如果在页面加载时动态 SELECTED 值为“2”，我如何显示列表 2。即不是在事件之后，而是在事件之前。

提前感谢您提供任何帮助/建议。 我想知道的是，我该怎么做

【参考方案1】：

您可以在页面加载时触发更改事件

$("#list1").trigger("change");

【讨论】：

我没有让它工作，但我确实设法做到了以下

【参考方案2】：

工作示例：http://jsfiddle.net/Gajotres/uX3NL/

需要注意的一点是，data-role="none" 被添加到第二个选择中。即使 display 设置为 none，它也会阻止 jQuery mobile 显示它。这就是为什么我要删除该属性，然后显示选择并使用函数 selectmenu 重新设置它的样式。

Javascript：

$(document).on('pagebeforeshow', '#index', function()       
    if($('#list1').find(":selected").val() == 2) 
        $('#list2').removeAttr('data-role').show().selectmenu();
    
);

CSS：

#list2 
    display: none;

HTML：

    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <select id="list1">
                <option value="1">Item1</option>
                <option value="2" selected="selected">Item2</option>
            </select>
            <select id="list2" data-role="none">
                <option value="3">Item3</option>
                <option value="4">Item4</option>
            </select>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>  

【讨论】：

我使用以下方法让它工作。 $('#list2').hide(); var selVal = $("#vlist1 :selected").val() ; if (selVal == 2) $('#list2').show();

【参考方案3】：

我使用以下方法使其工作。 $('#list2').hide();

    var selVal = $("#vlist1 :selected").val() ;

     if (selVal == 2) 

     $('#list2').show();