根据下拉选择(Javascript / HTML)动态填充字段
Dynamically populate a field based on dropdown selection (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>
您也可以使其非常复杂,例如使用哈希数组。如果您需要复杂的解决方案,请告诉我。
相关文章:
- 使用jQuery根据动态生成的html动态添加html
- HTML动态更新滑块输入
- 无法从HTML动态表中获取数据
- Python/JavaScript/HTML 动态创建计算机网络图
- 从 html 动态调用 javascript 对象函数
- 通过内部HTML动态创建日历不起作用
- 如何将节点内容从 xml 复制到硬编码的 html(动态到原始 html)
- 为什么我无法使用jQuery将HTML动态添加到页面
- 如何读取html表中复选框的值,该表是作为内部html动态插入到表单元格中的
- 如何使用Javascript获取HTML动态用户输入的值
- 从html动态加载angularjs控制器
- Html动态错误javascript Uncaught TypeError:$不是函数
- 如何将html动态嵌入到框架标记中
- HTML动态裁剪
- 使用jQuery和HTML动态创建标签,并使用jQuery访问其文本值
- HTML动态/响应式元素定位
- 我如何使用下面的html动态创建wordcloud为我的android应用程序
- 使用.html()动态更改数据后单击function
- JavaScript中的Html动态表
- JS/HTML——动态创建带有选项的select元素