从一个下拉列表中选择一个选项会填充其他输入字段
Posted
技术标签:
【中文标题】从一个下拉列表中选择一个选项会填充其他输入字段【英文标题】：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 等，并使用在这些下拉列表中找到的值。 【参考方案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，所以很多看起来像胡言乱语，但是，是学习它的最佳时机。哈哈。感谢帮助的人。以上是关于从一个下拉列表中选择一个选项会填充其他输入字段的主要内容，如果未能解决你的问题，请参考以下文章