使用jQuery向下拉列表中添加选项的最简单方法是什么?

这行吗?

$("#mySelect").append('<option value=1>My option</option>');

当前回答

您可以将选项动态添加到下拉列表中,如下图所示。在此示例中,我获取了数组数据,并将这些数组值绑定到下拉列表中,如输出截图所示

输出:

var resultData=[“孟买”,“德里”,“钦奈”,“果阿”]$(文档).ready(函数){var myselect=$('<select>');$.each(resultData,函数(索引,键){myselect.append($('<option></option>').val(key).html(key));});$(“#selectCity”).append(myselect.html());});<script src=“https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script><select id=“selectCity”></选择>

其他回答

我喜欢使用非jquery方法:

mySelect.add(new Option('My option', 1));
var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

您可以将选项动态添加到下拉列表中,如下图所示。在此示例中,我获取了数组数据,并将这些数组值绑定到下拉列表中,如输出截图所示

输出:

var resultData=[“孟买”,“德里”,“钦奈”,“果阿”]$(文档).ready(函数){var myselect=$('<select>');$.each(resultData,函数(索引,键){myselect.append($('<option></option>').val(key).html(key));});$(“#selectCity”).append(myselect.html());});<script src=“https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script><select id=“selectCity”></选择>

当您附加选项并使用jqueryvalidate时,我们发现了一些问题。您必须在选择多个列表中单击一个项目。您将添加此代码以处理:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

根据dule对附加一系列项目的回答。。。也会创造奇迹:

let cities={'ny':'纽约','d':'伦敦','b':'迪拜','pk':'北京','k':'东京','nd':'新德里'};for(让c在城市中){$(“#selectCity”).append($(“<option>”,{value:c,text:city[c]})}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js“></script><select id=“selectCity”></select>

对象值和索引都指定给选项。这个解决方案甚至可以在旧的jQuery(v1.4)中使用!