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

Question

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

因此，如果下拉菜单和它下方的另一个下拉菜单，应该会发生以下情况。当您从 dropDown1 选择 "A" 时，dropDown2 应填充 "You chose A"。如果您选择 "B"，dropDown2 应该显示 "You chose 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>

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

Answer 1

对于预定义值，如您所拥有的，您可以使用以下 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/

Answer 2

这是另一种选择，根据我所做的一些开发进行了缩减。更灵活但也更复杂。注意项目是如何用 data-* 属性标记的，以确定隐藏和显示的内容。 http://jsbin.com/siyexumulu/1/

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

Selecting an option from one drop down populates other input fields

html

javascript

css

jquery

drop-down-menu