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

Question

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

6

我正在寻求一些帮助来编写我们公司网站的代码。我们试图基于下拉框中的选择创建一个自定义“零件编号生成器”。我们的目标是，当用户在下拉框中选择一个选项时，它会动态地填充在下面的一个框中，最终创建一个零件编号。附上的截图是设计和我们想要输出框的良好可视化表示。我们希望使用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表单扩展和Photoshop制作的，以展示我们想要的外观。我不在意灰色框或格式，我们只是遇到了将输出框向下移动（水平排列）并垂直排列选项的代码问题。

链接到截图

- FlexMarket

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- webtrick101 · Accepted Answer

最简单的解决方案（不使用数组）：

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

您也可以使用哈希数组等复杂方法来实现。如果您需要这种复杂的解决方案，请告诉我。