【问题标题】：Adding additional options to select using ajax添加其他选项以使用 ajax 进行选择
【发布时间】：2016-12-25 04:45:02
【问题描述】：

我试图在 JQM 中使用 ajax 向下拉列表添加其他选项。第一个选项是静态禁用选择和隐藏选项。其他选项是使用 ajax 从 Web 服务中提取的。下拉列表本身位于弹出窗口内。

这是我的代码：

<div data-role="popup" id="puIceCream"><div>
     <center>Select Flavor:</center>
     <select id="ddlFlavorsIC">
        <option value="" disabled selected hidden>Please Choose...</option>
         <!--Flavors are added here-->
     </select>
</div>

JS代码如下：

$("#puIceCream").on("popupafteropen", function (event) {
    if (!$("#ddlFlavorsIC option").length) {
        WebServiceURL = "IceWS.asmx";
        $.support.cors = true;
        $.ajax({
            url: WebServiceURL + "/GetFlavors",
            dataType: "json",
            type: "get",
            data: "{ }",
            contentType: "application/json; charset=utf-8",
            error: function (err) {
                alert("error: " + JSON.stringify(err));
            },
            success: function (data) {
                var size = data["d"].length;
                for (var i = 0 ; i < size; i++) {
                    $("#ddlFlavorsIC").append("<option>" + ((String)(data["d"][i].value)) + "</option>");
                }
            }
        });
    }
});

如果我删除标记上的静态隐藏选项，它可以正常工作，但由于某种原因它不能使用它。这是为什么呢？

提前致谢！

【问题讨论】：

标签： javascript jquery ajax jquery-mobile

【解决方案1】：

改变

if (!$("#ddlFlavorsIC option").length) {

到

if ($("#ddlFlavorsIC option").length < 2){

如果下拉列表中有零个选项，您的代码只会添加风味，因此您的一个静态选项会导致您不输入 IF 语句。

DEMO

【讨论】：

哇哦，真不敢相信我没有注意到！感谢您的帮助！