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

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

第一：填充下拉菜单（此部件正在工作）

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

---

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

首先，for元素是人口较少的元素，您应该删除

（options.length-1）

然后需要将select.onchange的处理程序事件关联起来，并使用的索引检索数组的索引

HTML:

JS:

var fNames=[“aName”、“bName”、“cName”]；
var fDesc=[“aDesc”、“bDesc”、“cDesc”]；
var select=document.getElementById（'FName'）；
var期权=fNames；
对于（变量i=0；i<（options.length）；i++）{
var opt=期权[i]；
var el=document.createElement（“选项”）；
el.textContent=opt；
el.value=opt；
选择。追加子对象（el）；
}
select.onchange=function（）{
var textbox=document.getElementById（'AName'）；
textbox.value=fDesc[fNames.indexOf（select.value）]；
}

JsFiddle：

---

最好将

aName

作为文本，将

aDesc

作为值

HTML

Javascript

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

function fillText(){
    document.getElementById('Fdesc').value = document.getElementById('FName').value;
}

window.onload=function（）{
变量fNames=[“aName”、“bName”、“cName”]
变量fDesc=[“aDesc”、“bDesc”、“cDesc”]
var select=document.getElementById（'FName'）；
对于（变量i=0；i<（fNames.length）；i++）{
var el=document.createElement（“选项”）；
el.textContent=fNames[i]；
el.value=fDesc[i]；
选择。追加子对象（el）；
}
select.selectedIndex=-1；
}
函数fillText（）{
document.getElementById（'Fdesc'）。value=document.getElementById（'FName'）。value；
}

您需要搜索所选值的索引，然后使用该索引在搜索数组中获得相同的位置

更新的解决方案还包括手动填充：

<script>

    document.addEventListener('DOMContentLoaded', onDomContentLoaded);

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

    function onDomContentLoaded() {

        var mySelect = document.getElementById("mySelect");
        fillSelect(mySelect);

        mySelect.addEventListener('change', onSelectChange);
    }

    function fillSelect(mySelect) {
        for(var i = 0; i < (fNames.length); i++) {
            var opt = fNames[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            mySelect.appendChild(el);
        }
    }

    function onSelectChange(){

      var selectedValue = this.options[this.selectedIndex].value;

      //console.log('selected value', selectedValue);
      var selectedValueIndexInArray = fNames.indexOf(selectedValue);
      var fieldOutput = document.getElementById("output");
      fieldOutput.innerHTML = fDesc[selectedValueIndexInArray];
    }

</script>

<select id="mySelect"></select>

<div id="output"></div>

document.addEventListener（'DOMContentLoaded'，onDomContentLoaded）；
//资料
var fNames=[“aName”、“bName”、“cName”]；
var fDesc=[“aDesc”、“bDesc”、“cDesc”]；
函数onDomContentLoaded（）{
var mySelect=document.getElementById（“mySelect”）；
fillSelect（mySelect）；
mySelect.addEventListener（'change'，onSelectChange）；
}
函数fillSelect（mySelect）{
对于（变量i=0；i<（fNames.length）；i++）{
var opt=fNames[i]；
var el=document.createElement（“选项”）；
el.textContent=opt；
el.value=opt；
mySelect.appendChild（el）；
}
}
函数onSelectChange（）{
var selectedValue=this.options[this.selectedIndex].value；
//console.log（'selected value'，selectedValue）；
var selectedValueIndexInArray=fNames.indexOf（selectedValue）；
var fieldOutput=document.getElementById（“输出”）；
fieldOutput.innerHTML=fDesc[selectedValueIndexInArray]；
}

工作示例

---

最好将

aName

作为文本，将

aDesc

作为值。@Mritunjay这适用于

fDesc

的简单值，但不适用于复杂值。无需通过DOM压缩数据。用JavaScript将其保存在内存中很好。@Halcyon我不明白这里所说的

complex

是什么意思。不管怎样，我都会有一些东西作为值。@Mritunjay我的意思是不是标量或容易序列化的值，比如

{foo:function（）{}

@Halcyon好的，谢谢告诉我，我没有想过，但我认为OP不需要这样的东西。谢谢——这正是我需要的。谢谢你在柜台上看到我的“-1”。我之前一直在玩别的东西，却忘了里面有！谢谢你的帮助，这几乎涵盖了一切。我只是无法在加载时运行函数。fNames和fDesc变量直到页面的更深处才被定义——我使用php从MySQL数据库中获取它们并对它们进行操作，然后才能以所需的方式将它们插入JavaScript数组。但是如果我只是在变量存在后定义函数，这就行了。

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

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)];
    }

<select id='FName' onchange='fillText()'></select>
<input id='Fdesc' type='text'/>

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

function fillText(){
    document.getElementById('Fdesc').value = document.getElementById('FName').value;
}

<script>

    document.addEventListener('DOMContentLoaded', onDomContentLoaded);

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

    function onDomContentLoaded() {

        var mySelect = document.getElementById("mySelect");
        fillSelect(mySelect);

        mySelect.addEventListener('change', onSelectChange);
    }

    function fillSelect(mySelect) {
        for(var i = 0; i < (fNames.length); i++) {
            var opt = fNames[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            mySelect.appendChild(el);
        }
    }

    function onSelectChange(){

      var selectedValue = this.options[this.selectedIndex].value;

      //console.log('selected value', selectedValue);
      var selectedValueIndexInArray = fNames.indexOf(selectedValue);
      var fieldOutput = document.getElementById("output");
      fieldOutput.innerHTML = fDesc[selectedValueIndexInArray];
    }

</script>

<select id="mySelect"></select>

<div id="output"></div>