Question

我正在为我的项目使用Jquery Mobile。当我使用.empty()清除组合框中的所有内容时，它无效。

我的代码：

<select name="select-choice-a1" data-native-menu="false" id="vj">
                    <option>Custom menu example</option>
                    <option value="standard">Standard: 7 day</option>
                    <option value="rush">Rush: 3 days</option>
                    <option value="express">Express: next day</option>
                    <option value="overnight">Overnight</option>
                </select>

使用Javascript：

$("#vj").empty();

我只是在设备准备之后调用它。

当页面加载时，我给出的html被更改为

<div class="ui-content" data-role="main">

                <a class="ui-btn ui-btn-inline ui-corner-all ui-shadow" href="#myPanel">Add Location</a>

                <label class="select" for="select-choice-a1">Select Location</label>
                <div class="ui-select"><a href="#" role="button" id="vj-button" aria-haspopup="true" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"><span>Custom menu example</span></a><select id="vj" data-native-menu="false" name="select-choice-a1" tabindex="-1">
                    <option data-placeholder="true">Custom menu example</option>
                    <option value="standard">Standard: 7 day</option>
                    <option value="rush">Rush: 3 days</option>
                    <option value="express">Express: next day</option>
                    <option value="overnight">Overnight</option>
                </select><div style="display: none;" id="vj-listbox-placeholder"><!-- placeholder for vj-listbox --></div></div>

                <label class="ui-hidden-accessible" for="textinput-hide">RFID:</label>
                <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" value="" placeholder="Text input" name="textinput-hide"></div>

                <label class="ui-hidden-accessible" for="textinput-hide">Details:</label>
                <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" value="" placeholder="Text input" name="textinput-hide"></div>

            </div>

Answer 1

这是custom selectmenu转换为弹出窗口。我猜.empty()如果没有destroying选择菜单就行不通，并从头开始创建。

所以你必须做以下事情。

$("#vj")
    .selectmenu("destroy") // destory it
    .empty();              // remove options

之后，添加新选项。

$("#vj").append("<option>");

添加新选项后，请务必使用.selectmenu()函数再次创建。

$("#vj").selectmenu();

请参阅此demo。

Answer 2

每次更改jQuery Mobile selectmenu小部件的内容时，都需要告诉jQM刷新小部件：

$( ".selector" ).selectmenu( "refresh", true );

API：http://api.jquerymobile.com/selectmenu/#method-refresh

对于你的情况：

$("#vj").empty().selectmenu( "refresh", true );

传入true会强制jQM重建窗口小部件，因此您无需销毁和重新初始化。

无法在组合框Jquery Mobile上清空（）

2 个答案: