根据下拉选择动态填充字段（Javascript / HTML）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了根据下拉选择动态填充字段（Javascript / HTML）相关的知识，希望对你有一定的参考价值。
我正在寻找一些编码我的公司网站的帮助。我们正在尝试根据下拉框中的选择创建自定义“部件号生成器”。我们的目标是当用户在下拉框中选择一个选项时，它会动态填充下面的框，最终创建一个部件号。附带的屏幕截图是设计的良好直观表示以及我们想要输出框的位置。我们希望用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完成的，向大家展示我们想要的样子。我不关心灰盒子或格式化，我们只是遇到代码问题，将输出框向下移动（水平排列）并垂直选择。
答案
最简单的解决方案（没有阵列）：
<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>
你也可以像使用哈希数组一样使它变得非常复杂。如果您需要复杂的解决方案，请告诉我。
以上是关于根据下拉选择动态填充字段（Javascript / HTML）的主要内容，如果未能解决你的问题，请参考以下文章