从选项中选择数组值,使用javascript填充文本字段

Question

我有一个表单,用户可以用ajax进行"即时搜索",搜索结果显示为"select ... option"标签,当用户选择一个选项时,它的值将填充一个文本字段.代码的"简化"版本是这样的:

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
        <option value="2413">2413 - Name A</option>
        <option value="2414">2414 - Name B</option>
        <option value="2415">2415 - Name C</option>
    </select>
</form>

您也可以在线查看:http://jsfiddle.net/BCXfQ/

现在,我需要为每个选项选择获得两个值,如下所示:

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
        <option value="['Name A', '2413']">2413 - Name A</option>
        <option value="['Name B', '2414']">2414 - Name B</option>
        <option value="['Name C', '2415']">2415 - Name C</option>
    </select>
</form>

但我不知道如何获取数组值并使用Code填充两个字段,使用Name填充另一个字段.

在线:http://jsfiddle.net/zm3nX/

我从现在开始尝试改变

form1.elements['Code'].value = this.options[this.selectedIndex].value

至

form1.elements['Code'].value = this.options[this.selectedIndex].value[0]

并

form1.elements['Code'].value = this.options[this.selectedIndex[0]].value

但没有运气.

谢谢你的帮助.

Answer 1

您是否考虑过使用数据属性？

Code: <input type="text" id="foo-code" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" id="foo-name" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" id="foo-list">
  <option data-name="Name A" data-code="2413">2413 - Name A</option>
  <option data-name="Name B" data-code="2413">2413 - Name B</option>
  <option data-name="Name C" data-code="2413">2413 - Name C</option>
</select>

把东西粘在一起:

var select = document.getElementById("foo-list");
var code = document.getElementById("foo-code");
var name = document.getElementById("foo-name");
select.addEventListener('change', function(event) {
  code.value = this.getAttribute("data-code");
  name.value = this.getAttribute("data-name");
}, false);