根据下拉选择（Javascript / HTML）动态填充字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28091038/
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
Dynamically populate a field based on dropdown selection (Javascript / HTML)
提问by FlexMarket
I am looking for some help in coding my companies website. We are trying to create a custom "part number generator" based on selections made from a dropdown box. Our goal is that when a user picks an option in the dropdown box that it dynamically fills in a box underneath, eventually creating a part number. The attached screenshot is a good visual representation of the design and where we want the output boxes. We are looking to do it in JavaScript and HTML.
我正在寻找一些帮助来编码我的公司网站。我们正在尝试根据从下拉框中所做的选择创建一个自定义的“零件编号生成器”。我们的目标是，当用户在下拉框中选择一个选项时，它会动态填充下方的框，最终创建一个零件编号。随附的屏幕截图很好地展示了设计以及我们想要输出框的位置。我们希望用 JavaScript 和 HTML 来实现。
The code we are using currently to get just a box that generates an output based on the selection is this:
我们目前使用的代码只是一个基于选择生成输出的框：
<script type="text/javascript">
// Pre populated array of data
var myData = new Array();
myData[1] = 'Some text';
myData[2] = 'Some other text';
</script>
<form id="example" name="example">
<select id="selector" name="selector">
<option value="" selected></option>
<option value=1>One</option>
<option value=2>Two</option>
</select>
<br />
<input type="text" value="" id="populateme" name="populateme" />
</form>
<script type="text/javascript">
document.example.selector.onchange = updateText;
function updateText() {
var obj_sel = document.example.selector;
document.example.populateme.value = myData[obj_sel.value];
}
</script>
I have searched around this website a bit and found some solutions for dynamic field population, but when I try to add a second form or move the box that will have the output in it, the code just stops working. I was wondering if anyone had experience with populating multiple fields with a dropdown selection. I can provide more information as needed, just message me or comment below.
我在这个网站上搜索了一下，找到了一些动态字段填充的解决方案，但是当我尝试添加第二个表单或移动包含输出的框时，代码就停止工作了。我想知道是否有人有使用下拉选择填充多个字段的经验。我可以根据需要提供更多信息，只需在下面给我留言或评论。
Info about the picture:This picture is done with our current Joomla Form extension and Photoshop to show everyone what we want it to look like. I dont care about the gray box or the formatting, we are just having issues with the code to move the output boxes down (lined horizontally) and having the options vertically.
关于图片的信息：这张图片是使用我们当前的 Joomla Form 扩展和 Photoshop 完成的，以向大家展示我们想要的样子。我不关心灰色框或格式，我们只是遇到了将输出框向下移动（水平排列）并垂直设置选项的代码问题。
回答by webtrick101
Easiest solution (without the array):
最简单的解决方案（没有阵列）：
<html>
<body>
<form id="example" name="example">
<select id="sensor" onchange="updateText('sensor')">
<option value="J">J</option>
<option value="K">K</option>
</select>
<select id="voltage" onchange="updateText('voltage')">
<option value="120V">120V</option>
<option value="240V">240V</option>
</select>
<br />
<input type="text" value="" id="sensorText" /> <input type="text" value="" id="voltageText" />
</form>
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
document.getElementById(id).value = document.getElementById(type).value;
}
</script>
</body>
</html>
You can also make it very complicated like using hash arrays. Let me know if you need the complicated solution.
你也可以让它变得非常复杂，比如使用哈希数组。如果您需要复杂的解决方案，请告诉我。
