无法在组合框上清空 () Jquery 移动

Question

我正在为我的项目使用 Jquery 移动设备。当我使用 .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 converted into a popup. I guess .empty() wouldn't not work without destroying选择菜单并从头开始创建它。

因此您必须执行以下操作。

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

之后，添加新选项。

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

添加完新选项后，请确保使用 .selectmenu() 函数再次创建它。

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

看到它在这个 demo 中工作。

Answer 2

任何时候更改 jQuery 移动选择菜单小部件的内容，都需要告诉 jQM 刷新小部件：

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

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

针对您的情况：

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

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

无法在组合框上清空 () Jquery 移动

Unable to empty() on combo boxes Jquery Mobile

javascript

jquery

jquery-mobile