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

Posted 2023-05-09

【中文标题】使用 javascript/jquery 数组生成选择菜单

【英文标题】：Generating a select menu using javascript/jquery arrays

【发布时间】：2014-04-20 20:26:54

【问题描述】：

我正在尝试使用 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 链接现在可以使用

【问题讨论】：

您的浏览器错误/javascript 控制台将是一个不错的起点。有许多语法错误需要解决。特别是您的数组表示法。

【参考方案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);

【参考方案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>";

【参考方案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);

【讨论】：

我的问题是如何使用数组键。我需要使用数组键作为选项的值