根据下拉列表选择动态填充一个字段（Javascript / HTML） [英] Dynamically populate a field based on dropdown selection (Javascript / HTML)
问题描述
大家早上好！
我正在寻找一些帮助我公司网站的代码。我们正在尝试根据从下拉框中进行的选择创建一个自定义的零件编号发生器。我们的目标是当用户在下拉框中选择一个动态填充下面的框中的选项时，最终创建一个零件号。附加的截图是设计的良好视觉表示，以及我们想要输出框的位置。我们期待着在Javascript和HTML中做到这一点。
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.
我们目前使用的代码是根据选择生成输出的代码如下：
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';
<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. I appreciate any and all help.
有关图片的信息：
This图片完成了我们当前的Joomla Form扩展和Photoshop，向大家显示我们想要的样子。我不关心灰色框或格式，我们只是将代码移出输出框（水平排列）并垂直选择。
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.
推荐答案
最简单的解决方案（不含数组）：
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.
这篇关于根据下拉列表选择动态填充一个字段（Javascript / HTML）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![链接到屏幕快照](\"http://i920.photobucket.com/albums/ad41/Neptech/example_zpsytxhnhvn.png\"){kind=link}