javascript - 使用关联 Javascript 数组填充下拉列表，然后填充文本框

Question

我是 Javascript 新手(但相当精通 php)，我正在尝试使用一组关联数组来执行两项任务。

首先:填充下拉菜单(这部分正在工作)

var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length-1); i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

“fNames”变量是一个数组，其中包含我从 php 数组中获取的字符串列表。我有另一个数组，称为“fDesc”，它的索引与“fNames”数组相匹配。像这样的事情:

var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc,", "cDesc"]

它们目前是单独的数组，而不是单个多维数组。

当从下拉菜单中选择“aName”时，如何使“aDesc”显示在文本框中？

Answer 1

首先，for元素是人口较少的元素，你应该删除(options.length-1)的-1

然后，您需要为 select.onchange 关联一个处理程序事件，并使用 index of 来检索数组的索引。

HTML:

<select id='FName'></select>
<input id='AName' type='text'/>

JS:

var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc,", "cDesc"];
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length); i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

    select.onchange = function(){
        var textbox = document.getElementById('AName');
        textbox.value = fDesc[fNames.indexOf(select.value)];
    }

JsFiddle: http://jsfiddle.net/dBtUz/