jQuery 功能 - 简单下拉选择填充来自另一个列表的下拉选择

Question

您好，乍一看这似乎是 Stack Overflow 上另一个 post 的副本，但事实并非如此。我已经搜索了我的问题的答案，同时我找到了一些很好的片段并使用了其中的一些信息。我的问题没有直接的答案。

简单说明一下：我也在其他论坛上问过这个问题。我有一种感觉，这可能最终会帮助很多开发人员，所以即使我在其他地方得到答案（或在那之前弄清楚），我也会post在这里。

我想简单明了地做的是：

Select "first dropdown list (Fruit)" 上的一个选项。
根据第一个的选择，在 "second dropdown list (Fruit_Types)" 上设置默认值。

最佳情况下，与第一个选择值相关的所有值（在 Fruit_Types 下）都将填充到第二个选择框中。

使用一个小的 jQuery 函数来执行此操作并且不引用选择列表中的 jQuery。换句话说，我应该能够将其放入任何包含任何两个相关列表（参见代码）的 html 页面，并且它应该可以工作。 jquery 应该是完全自主的。

如果对此有任何帮助，我将不胜感激。

如果有人可以帮助我使它正常工作，请告诉我。谢谢。

大部分工作已经完成（见代码），但我希望它每次都能一直工作。到目前为止它只在这些条件下有效：

在页面上 Refresh/Load
页面加载后一次

然后它停止工作。

# 开始代码

<!DOCTYPE html>
<html>
<head>
<title>Select one value based on the selection of another</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>

jQuery(document).ready(function($) {

jQuery( "#Fruit" )
 .change(function () {
  var str = "";
   jQuery('option:selected', this).each(function() {
    str += jQuery( this ).text() + " ";
    //Added with help from Chainat, Stack Overflow
     jQuery("#Fruit_Types option").removeAttr('selected');
    jQuery("#Fruit_Types option:contains(" + str + ")").first().attr('selected', 'selected');
     });
   })
.change();

});

</script>

</head>
<body>

<p>Select the top list and the second list should populate with the corresponding related values.</p>

<select id="Fruit">
<option id="1">Apples</option>
<option id="2">Oranges</option>
</select>

&nbsp;

<select id="Fruit_Types">
<option id="3">Apples Green</option>
<option id="4">Apples Red</option>
<option id="5">Apples Granny Smith</option>
<option id="6">Apples Fuji</option>
<option id="7">Oranges California</option>
<option id="8">Oranges Florida</option>
<option id="9">Oranges Blood</option>
<option id="10">Oranges Seedless</option>
</select>

</body>
</html>

# 结束代码

Answer 1

第一个问题，代码不断向第二个列表中的所有项目添加 selected 属性。您需要先删除它们，您也可能希望 select 第二个列表中只有一个项目。此代码将解决

 jQuery("#Fruit_Types option").removeAttr('selected');
 jQuery("#Fruit_Types option:contains(" + str + ")").first().attr('selected', 'selected');

如果你只想在第二个列表中显示相关项目，你可以考虑将水果类型保留在变量或其他东西上，并根据 selected 水果项目动态填充它们。

jQuery 功能 - 简单下拉选择填充来自另一个列表的下拉选择

jQuery function - Simple Drop down selection populated with dropdown selection from another list

mobile

jquery

selection