javascript - jquerymobile 动态添加选择菜单

Question

我有一组保管箱代码是

<fieldset data-role="controlgroup" data-type="horizontal">
    <!--<legend>&nbsp;</legend>-->
    <select name="select-widget" id="select-widget">
        <option value="Widget">Widget</option>
    </select>
    <select name="select-nbl" id="select-nbl">
        <option value="NBL">NBL</option>
        <option value="HSM">HSM</option>
        <option value="TERR">TERR</option>
        <option value="KEY_ACCOUNT">KEY ACCOUNT</option>
    </select>
    <select name="select-level-focus" id="select-level-focus">
        <option value="LEVEL">LEVEL</option>
        <option value="FOCUS">FOCUS</option>
    </select>
    <select name="select-wdg" id="select-wdg">
        <option value="WDG">WDG</option>
    </select>
    <select name="select-wds" id="select-wds">
        <option value="WDS">WDS</option>
    </select>
</fieldset>

不，我想在更改“select-nbl”或“select-levelfocus”时删除现有的选择框或添加新的选择框

如何使用 jquerymobile 做到这一点

Answer 1

这与 jQuery mobile 没有什么关系，它只是一个移动框架。您想要在此处执行的事件侦听器和 DOM 操作仍然由 jQuery 处理。

无论如何，你是怎么做到的？

好吧，你有你的事件监听器：

$('#select-nbl').change(function() {
    #Do something
});

你可以隐藏东西：

$('#select-wdg').parents('.ui-select').hide();

使用 parents() 是为了处理 jQuery mobile 放入的额外样式。

您无法轻松地将选择框添加到 jQuery mobile，但如果它们被隐藏，您可以显示它们。

$('#select-wdg').parents('.ui-select').show();

这一切都是行动：http: //jsfiddle.net/luhn/Vgc4g/9/