根据下拉选择动态填充字段（Javascript / HTML）答案

【问题标题】：Dynamically populate a field based on dropdown selection (Javascript / HTML)根据下拉选择动态填充字段（Javascript / HTML）
【发布时间】：2015-03-21 09:05:02
【问题描述】：

我正在为我的公司网站编写代码寻求帮助。我们正在尝试根据从下拉框中进行的选择来创建自定义“零件编号生成器”。我们的目标是，当用户在下拉框中选择一个选项时，它会动态填充下方的框，最终创建一个零件编号。随附的屏幕截图是设计的良好可视化表示以及我们想要输出框的位置。我们希望用 JavaScript 和 HTML 来实现。

我们目前使用的代码是这样的：

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

我在这个网站上搜索了一下，找到了一些动态字段填充的解决方案，但是当我尝试添加第二个表单或移动将包含输出的框时，代码停止工作。我想知道是否有人有使用下拉选择填充多个字段的经验。我可以根据需要提供更多信息，只需给我发消息或在下面发表评论。

图片信息： 这张图片是用我们当前的 Joomla Form 扩展和 Photoshop 完成的，向大家展示我们想要它的样子。我不关心灰色框或格式，我们只是遇到了将输出框向下移动（水平排列）和垂直选项的代码问题。

LINK TO SCREENSHOT

【问题讨论】：

标签： javascript html forms dynamic population

【解决方案1】：

最简单的解决方案（没有数组）：

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

你也可以让它变得非常复杂，比如使用哈希数组。如果您需要复杂的解决方案，请告诉我。

【讨论】：

webtrick101 真的太感谢你了！它工作得很好，我可以添加其他变量完全没问题！你是救生员！非常感谢我的朋友！
如何编辑它以将值输出到 php 变量 $sensor 和 $voltage 而不是输入字段？
如果你想填充一些文本而不是值文本怎么办。因此，您可能会选择“K”（并将“K”存储在数据库中），但实际上会在字段中填充一些更长的描述，例如“您选择了 'k' 传感器”
...我可以看到 data- 属性可以工作，但我看不出如何:-(