Html 使用javascript从选项中获取数组值以填充文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15759863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get array values from an option select with javascript to populate text fields
提问by Mario
I have a form where the user can make an "instant search" with ajax, and the search result are shown as "select... option" tags, when the user choose an option, it's value will populate a text field. The "simplified" version of the code is this:
我有一个表单，用户可以在其中使用 ajax 进行“即时搜索”，搜索结果显示为“选择...选项”标签，当用户选择一个选项时，它的值将填充文本字段。代码的“简化”版本是这样的：
<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>
You can also check it on line: http://jsfiddle.net/BCXfQ/
您也可以在线查看：http: //jsfiddle.net/BCXfQ/
Now, I need to get TWO values for each option select, like this:
现在，我需要为每个选项选择获取两个值，如下所示：
<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>
But I don't know how to get the array values and populate the two fields one with Code and the other with Name.
但我不知道如何获取数组值并填充两个字段，一个是代码，另一个是名称。
Online: http://jsfiddle.net/zm3nX/
在线：http: //jsfiddle.net/zm3nX/
I tried since now to change
我从现在开始尝试改变
form1.elements['Code'].value = this.options[this.selectedIndex].value
to
到
form1.elements['Code'].value = this.options[this.selectedIndex].value[0]
and to
并
form1.elements['Code'].value = this.options[this.selectedIndex[0]].value
but with no luck.
但没有运气。
Thanks for any help.
谢谢你的帮助。
回答by rodneyrehm
Have you considered using data attributes instead?
您是否考虑过使用数据属性？
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>
and glue things together:
把东西粘在一起：
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);
回答by RobG
You can do something like:
您可以执行以下操作：
<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>
Note that in IE if the user navigates the options using the cursor keys, an onchange event will be dispatched every time they move focus to a different option. Other browsers will wait for an option to actually be chosen with tab or space (depending on the browser).
请注意，在 IE 中，如果用户使用光标键导航选项，则每次将焦点移动到不同选项时都会调度 onchange 事件。其他浏览器将等待实际选择选项卡或空格（取决于浏览器）。
回答by Chris Moschini
Yeah I'd take an approach similar to the way Angular does this - using jquery with rodneyrehm's example:
是的，我会采用与 Angular 类似的方法 - 使用 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/
http://jsfiddle.net/b9chris/mbSLB/
This avoids the potentially flimsy regex; strings you store and what to escape when become simpler to consider and error check.
这避免了潜在脆弱的正则表达式；您存储的字符串以及在变得更易于考虑和错误检查时要转义的内容。
The data-prefix is just there to comply with the HTML5 spec, but the truth is you can make up whatever attribute names you like - so if you were generating this HTML on the server and wanted to keep it short you could even use a=and b=.
该data-前缀只是为了符合HTML5规范，但事实是，你可以弥补任何属性名称你喜欢-所以，如果你是在服务器上生成此HTML并且想保持短，你甚至可以使用a=和b=。
回答by Bharat Chodvadiya
Use this code.
使用此代码。
<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>
Hope it helps to you.
希望对你有帮助。
回答by Brijesh Eshwar
Try this
尝试这个
<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>
