javascript - 从一个下拉列表中选择一个选项填充其他输入字段

标签 javascript jquery html css drop-down-menu

我想弄清楚如何在从下拉列表中选择后用特定文本填充其他标签。

因此,如果下拉菜单和另一个下拉菜单低于它,则应该发生以下情况。当您从 dropDown1 中选择“A”时,dropDown2 应填充“您选择了 A”。如果您选择“B”,dropDown2 应该说“您选择了 B”。 “C”也是如此

下面是示例代码。

<html>
<body>
<form>

 <select id="dropDown1">
    <option value = "A">A</option>
    <option value = "B">B</option>
    <option value = "C">C</option>
 </select>

<select id="dropDown2">
    <option value="You chose A">You chose A</option>
    <option value="You chose B">You chose B</option>
    <option value="You chose C">You chose C</option>
</select>
</form>

</body>

</html>

如有任何帮助,我们将不胜感激。如果您能展示一些很棒的代码,或者如果您能为我指明正确的方向,我就能找到很棒的答案。

最佳答案

对于像您拥有的预定义值,您可以使用以下 jQuery/JavaScript 代码:

$(function() {
    $('#dropDown1').change(function(){
       $('#dropDown2').val('You chose ' + this.value);
    });
});

JS Fiddle 在这里:http://jsfiddle.net/vleong2332/82w7p0a6/

这里是当 dropDown2 改变时改变 dropDown1 的例子。 http://jsfiddle.net/vleong2332/82w7p0a6/1/

关于javascript - 从一个下拉列表中选择一个选项填充其他输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29633699/

相关文章:

JavaScript jQuery animate 不起作用,其他效果都很好

javascript - 在React中使用Fetch从服务器获取数据

javascript - 对动态 HTML 表格应用多重过滤

javascript - 使用 jquery 更改事件时,tab 键无法按预期工作

javascript - 删除记录确认消息

javascript - 查看未按预期更新

javascript - Angular : Passing data back to my controller from a factory ajax call

javascript - cakephp + extjs = b 为空 || ct 为空

javascript - 将表单输入值与所选选项相结合

jquery mobile 如何切换选择的显示