我正在尝试使用jQuery填充带有数组的下拉选择。
这是我的代码:
// Add the list of numbers to the drop down here
var numbers[] = { 1, 2, 3, 4, 5};
$.each(numbers, function(val, text) {
$('#items').append(
$('<option></option>').val(val).html(text)
);
// END
但我收到了一个错误。每个功能都是我从这个网站上下载的。
是否因为我正在使用一维数组而被轰炸?我希望选项和文本都一样。
答案 0 :(得分:88)
尝试循环:
var numbers = [1, 2, 3, 4, 5];
for (var i=0;i<numbers.length;i++){
$('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#items');
}
更好的方法:
var numbers = [1, 2, 3, 4, 5];
var option = '';
for (var i=0;i<numbers.length;i++){
option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
}
$('#items').append(option);
答案 1 :(得分:38)
数组声明的语法不正确。请尝试以下方法:
var numbers = [ 1, 2, 3, 4, 5]
循环部分似乎正确
$.each(numbers, function(val, text) {
$('#items').append( $('<option></option>').val(val).html(text) )
}); // there was also a ) missing here
正如@Reigel似乎确实增加了更多的性能(在这样的小阵列上并不明显)
答案 2 :(得分:7)
你也可以这样做:
var list = $('#items')[0]; // HTMLSelectElement
$.each(numbers, function(index, text) {
list.options[list.options.length] = new Option(index, text);
});
答案 3 :(得分:2)
var qty = 5;
var option = '';
for (var i=1;i <= qty;i++){
option += '<option value="'+ i + '">' + i + '</option>';
}
$('#items').append(option);
答案 4 :(得分:2)
解决方案是创建自己的jquery插件,该插件接受json地图并用它填充选择。
(function($) {
$.fn.fillValues = function(options) {
var settings = $.extend({
datas : null,
complete : null,
}, options);
this.each( function(){
var datas = settings.datas;
if(datas !=null) {
$(this).empty();
for(var key in datas){
$(this).append('<option value="'+key+'"+>'+datas[key]+'</option>');
}
}
if($.isFunction(settings.complete)){
settings.complete.call(this);
}
});
}
}(jQuery));
您可以通过以下方式调用它:
$("#select").fillValues({datas:your_map,});
优势在于,您只需调用
即可面对同样的问题 $("....").fillValues({datas:your_map,});
Et瞧!
您可以根据需要在插件中添加功能
答案 5 :(得分:0)
我使用的解决方案是创建一个使用jquery的javascript函数:
这将填充HTML页面上的下拉对象。请让我知道可以优化的地方 - 但工作正常。
function util_PopulateDropDownListAndSelect(sourceListObject, sourceListTextFieldName, targetDropDownName, valueToSelect)
{
var options = '';
// Create the list of HTML Options
for (i = 0; i < sourceListObject.List.length; i++)
{
options += "<option value='" + sourceListObject.List[i][sourceListTextFieldName] + "'>" + sourceListObject.List[i][sourceListTextFieldName] + "</option>\r\n";
}
// Assign the options to the HTML Select container
$('select#' + targetDropDownName)[0].innerHTML = options;
// Set the option to be Selected
$('#' + targetDropDownName).val(valueToSelect);
// Refresh the HTML Select so it displays the Selected option
$('#' + targetDropDownName).selectmenu('refresh')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
答案 6 :(得分:0)
由于我无法添加此as a comment
,因此我会将其留在这里,以供那些发现反引号更易于阅读的人使用。它基本上是@Reigel的答案,但带有反引号
var numbers = [1, 2, 3, 4, 5];
var option = ``;
for (var i=0;i<numbers.length;i++){
option += `<option value=${numbers[i]}>${numbers[i]}</option>`;
}
$('#items').append(option);
答案 7 :(得分:-1)
function validateForm(){
var success = true;
resetErrorMessages();
var myArray = [];
$(".linkedServiceDonationPurpose").each(function(){
myArray.push($(this).val())
});
$(".linkedServiceDonationPurpose").each(function(){
for ( var i = 0; i < myArray.length; i = i + 1 ) {
for ( var j = i+1; j < myArray.length; j = j + 1 )
if(myArray[i] == myArray[j] && $(this).val() == myArray[j]){
$(this).next( "div" ).html('Duplicate item selected');
success=false;
}
}
});
if (success) {
return true;
} else {
return false;
}
function resetErrorMessages() {
$(".error").each(function(){
$(this).html('');
});``
}
}