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

但我不知道如何获取数组值，并填充两个字段与代码和其他与名称。

在线：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

你可以这样做：

<script> 
function updateValues(el) { 
    var form = el.form; 
    var v = el.value; 
    v = v.replace(/^\[\'|\'\]$/g,'').split("', '"); 
    form.Code.value = v[1]; 
    form.Name.value = v[0]; 
} 
</script> 

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

注意，在IE浏览器，如果用户浏览使用光标键的选项，一个onchange事件每次他们将焦点转移到不同的选项时都会被派遣。其他浏览器将等待一个选项实际上被选中的标签或空间（取决于浏览器）。

Answer 2

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

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

Answer 3

使用此代码。

<script> 
    function setdata(selectvalue, selecttext){ 
     form1.elements['Code'].value = selectvalue; 
     form1.elements['Name'].value = selecttext; 
    } 
</script> 

<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="setdata(this.value,this.options[this.selectedIndex].text)"> 
     <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> 

希望它对你有帮助。

Answer 4

试试这个

<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="getValue(this.value);"> 
     <option value="Name A-2413">2413 - Name A</option> 
     <option value="Name B-2413">2413 - Name B</option> 
     <option value="Name C-2413">2413 - Name C</option> 
    </select> 
</form> 

<script> 
    function getValue(val){ 
     var myval=val.split('-'); 
     form1.elements['Code'].value=myval[1]; 
     form1.elements['Name'].value=myval[0]; 
    } 
</script> 

Answer 5

是的，我会采取类似办法的办法角度这是否 - 使用jquery与rodneyrehm的例子：

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

$('#foo-list').change(function() { 
    var opt = $(this.options[this.selectedIndex]); 
    var name = opt.attr('data-name'); 
    var code = opt.attr('data-code'); 

    $('#status').text('Name: ' + name + ', Code: ' + code); 
}); 

http://jsfiddle.net/b9chris/mbSLB/

这样就避免了可能脆弱的正则表达式;存储的字符串以及要变得更简单时需要考虑的错误检查。

data-前缀只是为了符合HTML5规范，但事实是您可以编写任何您喜欢的属性名称 - 因此，如果您在服务器上生成此HTML并希望保持简短，您甚至可以使用a=和b=。