如何從2d數組制作下拉列表並在輸入中顯示值？

Question

我想顯示一個下拉列表，其條目由編碼器填充，並且該列表是使用多維數組制作的，並且所選下拉列表的值應顯示在輸入框中。

下一個僅與1d數組一起使用。

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/