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

数组的语法错误。

检查此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);
}

Answer 2

如果你有类似var arr={"room1" : "1", "room2" : "2"}的大量关联，那么你可以使用像新数组一样的数组键：

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

你的代码在语法上是错误的，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);
}

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

3 个答案: