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

＆＃39; fnames＆＃39;变量是一个数组，其中包含我从php数组中获取的字符串列表。我有另一个阵列，名为＆＃39; fDesc＆＃39;索引以匹配＆＃39; fnames＆＃39;阵列。像这样：

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

他们目前正在分离数组，而不是一个多维数组。

我如何制作＆＃34; aDesc＆＃34; ＆＃34; aName＆＃34;出现在文本框中是从下拉菜单中选择的吗？

Answer 1

首先，for元素是少量元素，你应该删除-1的{{1}}

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

HTML：

(options.length-1)

JS：

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

的jsfiddle： http://jsfiddle.net/dBtUz/

Answer 2

最好将aName作为文本，将aDesc作为值。

HTML

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

的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;
}

Answer 3

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

使用手动填充更新了解决方案：

<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>

工作示例 http://jsfiddle.net/x92ka/4/

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

3 个答案: