使用jQuery动态更改<；中的选项；选择>；要素

我已经查阅了其他一些讨论，但需要有人向我简单地解释一下

我有两个选择元素，我想根据第一个元素选择的内容更改其中一个元素的选项。通过使用下面的代码，我可以让它正常工作。它适用于级别4和级别5选项，但当我在第一个下拉列表中选择级别6时，当您打开第二个下拉列表时，它仅显示第一个选项和一个小滚动条，因此您必须单独滚动每个选项

我希望在打开下拉列表时，所有级别6选项（带有class=“l6workshopmods”的选项）都可见，方式与级别4和5相同

为了澄清，这里有两张图片-一张显示选择级别4时的外观，另一张显示级别6。四级是我的目标

希望这有意义

HTML格式如下：

<select name="course" id="workshopcourseselect">
 <option value="choosecourse">Select Course</option>
 <option value="level4">BIFM Level 4</option>
 <option value="level5">BIFM Level 5</option>
 <option value="level6">BIFM Level 6</option>
</select>

<select name="module" id="workshopmoduleselect">
 <option value="choosecourse">Select Module</option>
 <option value="401" class="l4workshopmods">FM4.01 Understanding FM</option>
 <option value="402" class="l4workshopmods">FM4.02 FM Strategy</option>
 <option value="403" class="l4workshopmods">FM4.03 People Management in FM</option>
 <option value="404" class="l4workshopmods">FM4.04 Facilities Management Support Services Operations</option>
 <option value="405" class="l4workshopmods">FM4.05 Health &amp Safety</option>
 <option value="409" class="l4workshopmods">FM4.09 Performance Measurement in FM</option>
 <option value="415" class="l4workshopmods">FM4.15 Managing Customer Service in FM</option>
 <option value="417" class="l4workshopmods">FM4.17 Property, Fabric &amp Building Services Maintenance</option>
 <option value="419" class="l4workshopmods">FM4.19 Sustainability &amp Environmental Issues</option>
 <option value="421" class="l4workshopmods">FM4.21 Procurement &amp Contract Management for FMs</option>

 <option value="501" class="l5workshopmods">FM5.01 FM Development &amp Trends</option>
 <option value="502" class="l5workshopmods">FM5.02 Organisational &amp FM Strategy</option>
 <option value="503" class="l5workshopmods">FM5.03 Managing People in FM</option>
 <option value="504" class="l5workshopmods">FM5.04 Risk Management in FM</option>
 <option value="505" class="l5workshopmods">FM5.05 Financial Management in FM</option>
 <option value="511" class="l5workshopmods">FM5.11 Managing FM Projects</option>
 <option value="516" class="l5workshopmods">FM5.16 Propert &amp Asset Management in FM</option>
 <option value="521" class="l5workshopmods">FM5.21 Managing Procurement &amp Contracts in FM</option>

 <option value="601" class="l6workshopmods">FM6.01 Strategic FM</option>
 <option value="602" class="l6workshopmods">FM6.02 FM Governance &amp Risk</option>
 <option value="603" class="l6workshopmods">FM6.03 Quality Management &amp Customer Service in FM</option>
 <option value="604" class="l6workshopmods">FM6.04 Financial Management in FM</option>
 <option value="605" class="l6workshopmods">FM6.05 Strateigc FM of Support Service Operations</option>
 <option value="609" class="l6workshopmods">FM6.09 Developing Strategic Relationships in FM</option>
 <option value="611" class="l6workshopmods">FM6.11 Corporate Responsibility &amp Sustainable FM</option>
 <option value="612" class="l6workshopmods">FM6.12 Procurement Strategy for FM</option>
 <option value="613" class="l6workshopmods">FM6.13 Property Management &amp Maintenance for FM</option>

</select>

---

隐藏/显示选项在不同浏览器中的行为不一致。 一个简单的解决方法是使用分离/附加而不是隐藏/显示

有关使用该方法的演示，请参见：

---

隐藏/显示选项在不同浏览器中的行为不一致。 一个简单的解决方法是使用分离/附加而不是隐藏/显示

有关使用该方法的演示，请参见：

---

这种情况发生在您身上是因为最初您有一个非常大的

select

元素，其中包含许多选项

如果您将级别5的选项数量减少到两个，您将看到级别6正常工作

---

您的问题似乎是由于元素的原始渲染而发生的。正如@nxt所说，一个好的解决方案是使用jQuery动态地追加和删除元素

这种情况发生在您身上，因为最初您有一个非常大的

select

元素，具有许多选项

如果您将级别5的选项数量减少到两个，您将看到级别6正常工作

---

您的问题似乎是由于元素的原始渲染而发生的。正如@nxt所说，一个好的解决方案是使用jQuery动态地追加和删除元素

我实际上根本无法在Chrome/MacOS X上实现这一点。选项的

hide（）

和

show（）

似乎没有任何效果

所以我做了一个，想出了一个稍微不同的方法。我实际上删除了第二个select元素中的所有选项。然后，当第一次选择更改时，我会清空第二次选择中的内容，然后插入所需的选项：

var l4 = $("#workshopmoduleselect .l4workshopmods").detach();
var l5 = $("#workshopmoduleselect .l5workshopmods").detach();
var l6 = $("#workshopmoduleselect .l6workshopmods").detach();
var def = $("#workshopmoduleselect option"); // everything else.  Don't detach.

$('#workshopcourseselect').change(function() {
    var level = $(this).val();
    var menu = $('#workshopmoduleselect');

    menu.empty();
    if (level == "level4")
        menu.append(l4);
    else if (level == "level5")
        menu.append(l5);
    else if (level == "level6")
        menu.append(l6);
    else
        menu.append(def);
});​

---

实际上，我无法在Chrome/MacOS X上实现这一点。选项的

hide（）

和

show（）

似乎没有任何效果

所以我做了一个，想出了一个稍微不同的方法。我实际上删除了第二个select元素中的所有选项。然后，当第一次选择更改时，我会清空第二次选择中的内容，然后插入所需的选项：

var l4 = $("#workshopmoduleselect .l4workshopmods").detach();
var l5 = $("#workshopmoduleselect .l5workshopmods").detach();
var l6 = $("#workshopmoduleselect .l6workshopmods").detach();
var def = $("#workshopmoduleselect option"); // everything else.  Don't detach.

$('#workshopcourseselect').change(function() {
    var level = $(this).val();
    var menu = $('#workshopmoduleselect');

    menu.empty();
    if (level == "level4")
        menu.append(l4);
    else if (level == "level5")
        menu.append(l5);
    else if (level == "level6")
        menu.append(l6);
    else
        menu.append(def);
});​

---

---

你说的

（

）是指

$

？你知道，我有点紧张，但当我看到这一点时，我发现它在很多方面都很有趣，这让我感觉更好“有点复杂，我知道”，然后整理你的问题，也许有人能帮助你

british.jquery.com

；-）选择选项的show（）和hide（）方法在IE中有问题。您的意思是说

$

？你知道，我有点紧张，但当我看到这一点时，我发现它在很多方面都很有趣，这让我感觉更好“有点复杂，我知道”，然后整理你的问题，也许有人能帮助你

british.jquery.com

；-）select选项的show（）和hide（）方法在IE中有问题。我的解决方案在呈现select后删除选项，因此不会保存任何数据传输，实际上可能会稍微提高加载速度，因为我们在呈现后修改dom。为了提高渲染速度，应该对其进行修改，以将选项保留在javascript数组中，而不是渲染和分离它们。True，我只是快速查看了一下您的答案：）抱歉。我的解决方案在呈现select后删除了选项，因此不会保存任何数据传输，实际上可能会稍微提高加载速度，因为我们在呈现后修改dom。为了提高渲染速度，应该对其进行修改，以将选项保留在javascript数组中，而不是渲染和分离它们。没错，我只是快速查看了您的答案：）对不起，@nxt的解决方案设计得更好，尽管读起来有点难。根据您的评论，我选择了@nxt的解决方案，尽管我不得不说，我并不完全理解它是如何工作的（尽管最重要的是它确实工作！）。感谢您抽出时间来寻找解决方案！无可否认，@nxt的解决方案设计得更好，尽管读起来有点难。根据你的评论，我同意@nxt的解决方案，尽管我不得不说我不完全理解它是如何工作的（尽管主要的是它确实工作！）。感谢您抽出时间来寻找解决方案！虽然我有一个小小的疑问，但这确实起了作用。如果我在稍后阶段向下拉列表添加更多选项，我将如何将其集成到函数中？我对jQuery还相当陌生，所以这段代码的复杂性我有点难以理解，但我想尝试并正确理解它，而不仅仅是复制、粘贴和留下它@Chris如果保持相同的约定（在第一次选择中使用value=levelXX，在第二次选择中使用lXXworkshopmods作为类），则无需更改jquery函数。当前的函数假定第一个select的值包含一个数字，并且第二个select的选项类中包含相同的数字select@Chris我在上添加了一些额外的注释来解释不同的部分。尽管我有一个小小的疑问，但这是一种享受。如果我再加上

var l4 = $("#workshopmoduleselect .l4workshopmods").detach();
var l5 = $("#workshopmoduleselect .l5workshopmods").detach();
var l6 = $("#workshopmoduleselect .l6workshopmods").detach();
var def = $("#workshopmoduleselect option"); // everything else.  Don't detach.

$('#workshopcourseselect').change(function() {
    var level = $(this).val();
    var menu = $('#workshopmoduleselect');

    menu.empty();
    if (level == "level4")
        menu.append(l4);
    else if (level == "level5")
        menu.append(l5);
    else if (level == "level6")
        menu.append(l6);
    else
        menu.append(def);
});​