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

【问题标题】：Selecting an option from one drop down populates other input fields从一个下拉列表中选择一个选项会填充其他输入字段
【发布时间】：2015-06-20 10:31:13
【问题描述】：

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

因此，如果下拉列表和其下方的另一个下拉列表应该发生以下情况。当您从 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>

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

【问题讨论】：

选择 2 中的值是预定义的，而不是根据选择 1 输入选择的值，还是要根据选择 1 中的用户输入动态添加选项以选择 2？
是的，选择 2 将取决于选择 1。因此，如果 dropDown1 = A 那么 dropDown 2 应该显示“你选择了 C”。几乎是一个 if then 语句。如果“a”是这个，那么“b”就是那个。
是的，一切都是预定义的。如果您从 dropDown1 中选择某些内容，它将填充 dropDown2、dropDown3 等，并使用在这些下拉列表中找到的值。

标签： javascript jquery html css drop-down-menu

【解决方案1】：

对于您所拥有的预定义值，您可以使用以下 jQuery/JavaScript 代码：

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

这里是 JS 小提琴：http://jsfiddle.net/vleong2332/82w7p0a6/

这是在 dropDown2 更改时更改 dropDown1 的示例。 http://jsfiddle.net/vleong2332/82w7p0a6/1/

【讨论】：

我喜欢这个，我唯一的问题是我可以用多个字段重复这个吗？所以说我在 dropDown1 中选择了 A，它可以从 dropDown2、dropDown3 和 dropDown4 中填充一些东西吗？这也可以用来填充字段吗？
你当然可以，但如果我知道你的标记 (HTML)，它会帮助我更好地可视化它。可能必须将 JavaScript 放入函数中以避免重复代码。
看这个。 link 请注意，我将下拉列表中的值更改为相同，但保持文本不同。
谢谢大家。我会弄乱它，几乎只需要一个起点。现在，尝试弄清楚并修改它以做我想做的事情的乐趣来了。
随时！如果此答案对您有用，我将不胜感激“接受为答案”。祝你好运。

【解决方案2】：

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

【讨论】：

完全了解它的复杂性，但我认为从长远来看，这实际上可能对我的程序有所帮助。不是精通Java，所以很多看起来像胡言乱语，但是，是学习它的最佳时机。哈哈。感谢帮助的人。