使用 javascript/jquery 数组生成选择菜单

Question

我正在尝试使用 javascript 数组生成 HTML 选择菜单。数组键应该用作选项的值。如果数组键作为数字输入（就像我在代码中所做的那样），它们应该被接受。

a([selected="No of rooms", 1="1", 2="2", 3="3", 4="4", 5="5"]);


function a(x) {
 elementString = "<select>";
 for(var i in  x) {
     elementString += '<option value="">'+i+'</option>';
 }    
elementString += "</select>";
alert(elementString);
}

但是这段代码不起作用。而且我找不到使用数组键作为值的方法 的选项。我得到的另一个问题是，如果我将数字作为键它不起作用（这是一个要求）。

jsfiddle

编辑：jsfiddle 链接现在可以使用

Answer 1

您的代码在语法上是错误的，并且 JavaScript 没有关联数组，数组元素的键是它们的索引，但是您可以使用对象：

a({selected: "No of rooms", 1: "1", 2: "2", 3: "3", 4: "4", 5: "5"});

但需要注意的是，JavaScript 对象没有顺序，即生成的元素在每个浏览器中可能不同。如果你想保持顺序，你应该使用一个数组，在这种情况下是一个对象数组：

a([{
    text: "No of rooms",
    value: "...",
    selected: true
}, {
    text: "one",
    value: "1",
    selected: false
}]);

function a(x) {
    var elementString = "<select>";
    for (var i = 0; i < x.length; i++) {
        elementString += '<option value="' + x[i].value + '"' + (x[i].selected ? "selected='selected'" : '') + '>' + x[i].text + '</option>';
    }
    elementString += "</select>";
    // document.body.innerHTML = (elementString);
}

Answer 2

如果你有像 var arr={"room1" : "1", "room2" : "2"} 这样的 assoc，那么你可以使用新数组这样的数组键：

var keys = Object.keys(arr);
var k = keys.length;

var elementString = "<select>";

for(var i=0; i<k; i++) {
   elementString += '<option value="'+keys[i]+'">'+arr[keys[i]]+'</option>';
}    
elementString += "</select>";

更简单的方法是：

var arr = {"room1" : "1", "room2" : 2};

for (var i in arr) {
      elementString += '<option value="'+i+'">'+arr[i]+'</option>';
}    
elementString += "</select>";

Answer 3

您的数组语法错误。

检查这个fiddle

如下改变你的数组

var arr= ["No of rooms", "1", "2", "3", "4", "5"];

如果要使用键值对，请使用 json 对象数组。

more about json

更新：fiddle using json

var arr = [{
value: '1',
data: "1"
}, {
value: '2',
data: "2"
}, {
value: '3',
data: "3"
}, {
value: '4',
data: "4"
}, {
value: '4',
data: "4"
}];

a(arr);

function a(x) {
     elementString = "<select><option value='0' selected>" + "No of rooms</option>";
     for (var i in x) {
       elementString += '<option value="' + x[i].value + '">' + x[i].data + '</option>';
     }
     elementString += "</select>";
     alert(elementString);
}