javascript - 无法在组合框 Jquery Mobile 上清空()

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转换为弹出窗口。我想如果没有 destroying，.empty() 将无法工作。选择菜单并从头开始创建它。

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

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

之后，添加新的选项。

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

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

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

查看它在这个 demo 中的工作.