javascript - 如何从二维数组创建下拉列表并显示输入中的值？

Question

我想显示一个下拉列表，其条目由编码器填充，并且该列表是使用多维数组创建的...并且所选下拉列表的值应显示在输入框中。

以下仅适用于一维数组。

HTML 代码:

<form id="myForm">
<select id="selectCity">
<option>Choose a city</option>
</select>
</form>
<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">

Javascript代码:

var city = new Array()
city[0][H: 1] = "Delhi";
city[1][H: 2] = "Mumbai";
city[2][H: 3] = "Bangalore";
city[3][H: 4] = "Kolkata";
city[4][H: 5] = "Chennai";
city[5][H: 6] = "Hyderabad";
city[6][H: 7] = "Ahemdabad";
var dropdown = document.getElementById("selectCity");
for (var i = 1; i < city.length; ++i) {
dropdown[dropdown.length] = new Option(city[i], city[i]);
}
var select = document.getElementById('myForm');
var input = document.getElementById('txtprice');
select.onchange = function () {
input.value = select.value;
}

Answer 1

这会稍微改变您的代码以使用数组。它尚未准备好投入生产，因为它需要添加测试以确保用户不会选择第一个选项(“选择选项”)，而是如您的示例所示。

var html="<option>Choose a city</option>", 
city = new Array(),
dropdown = document.getElementById("selectCity"),
select = document.getElementById('myForm'),
input = document.getElementById('txtprice');

city[0] = {name:"Delhi",value: 1,key: "H"};
city[1] = {name:"Mumbai",value: 1,key: "H"};
city[2] = {name:"Bangalore",value: 1,key: "H"};
city[3] = {name:"Kolkata",value: 1,key: "H"};
city[4] = {name:"Chennai",value: 1,key: "H"};
city[5] = {name:"Hyderabad",value: 1,key: "H"};
city[6] = {name:"Ahemdabad",value: 1,key: "H"};

for (var i = 1; i < city.length; ++i) {
    var item=city[i];
    html+="<option value='"+ (item.key+":"+item.value) + "'>"+item.name+"</option>";
}
dropdown.innerHTML=html;

select.onchange = function () {
input.value = dropdown.value;
}

http://jsfiddle.net/dfch52ut/7/