Question

我有一些JQuery获取JSON数组并填充HTML Select下拉菜单，它运行正常：

    $.ajax({
        url: urlLink,
        success: function(data) {
            var sel = $('#siteChangeSelect');
            sel.empty();

            var SiteList = (data.sites);

            $('#chSBtn').show();

            $.each(SiteList, function(i, item){
                sel.append('<option value ="' + SiteList[i].customerReference + '">' + SiteList[i].customerSite + '</option>');

            });

        }
    });

但是，我想要做的是在列表中添加一个选项，用户可以选择默认选项，例如“Use All Available”。如何将此选项添加到动态生成的列表的底部？

Answer 1

就像动态一样：

$.each(SiteList, function(i, item){
  sel.append('<option value ="' + SiteList[i].customerReference + '">' + SiteList[i].customerSite + '</option>');
});
sel.append('<option value ="all" selected>Use All Available</option>');

然而，我会将它附加到顶部，而不是底部。

Answer 2

使用以下代码为您创建了一个简单的JSFIDDLE：

var sel = $('#siteChangeSelect');
var siteList = [];
siteList.push({ customerReference : "Test1", customerSite : "Test1"});
siteList.push({ customerReference : "Test2", customerSite : "Test2"});
siteList.push({ customerReference : "Test3", customerSite : "Test3"});
siteList.push({ customerReference : "Test4", customerSite : "Test4"});
siteList.push({ customerReference : "Test5", customerSite : "Test5"});
siteList.push({ customerReference : "Test6", customerSite : "Test6"});

$.each(siteList, function(i, item){
    sel.append('<option value ="' + siteList[i].customerReference + '">' +             siteList[i].customerSite + '</option>');

});

//Adds to the bottom
$(sel).append('<option value="newValueBottom">New Value Bottom</option>');
//Adds to the top
$(sel).prepend('<option value="newValueTop">New Value Top</option>');

向HTML Select添加静态选项以及动态选项

2 个答案: