使用 jQuery 动态更改 <select> 元素中的选项

Question

我已经在其他一些讨论中查找了此内容，但需要有人简单地向我解释一下。

我有 2 个选择元素，我想根据第一个选择的内容更改其中一个的选项。我已经通过使用下面的代码让它工作了。它非常适用于 4 级和 5 级选项，但是当我在第一个下拉列表中选择 6 级时，当您打开第二个下拉列表时，它只显示第一个选项和一个很小的滚动条，因此您必须单独滚动浏览每个选项.

我想获得它，以便在您打开下拉菜单时所有 6 级选项（带有 class="l6workshopmods" 的选项）都可见，就像 4 级和 5 级一样。

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

希望这是有道理的！

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>

我试过的jquery是：

$(document).ready(function(){

 $(".l4workshopmods, .l5workshopmods, .l6workshopmods").hide();

 $('#workshopcourseselect').change(function(){
  if ($('#workshopcourseselect').val() == "level4"){
   $(".l4workshopmods").show();
   $(".l5workshopmods, .l6workshopmods").hide();
}
  else if ($('#workshopcourseselect').val() == "level5"){
   $(".l5workshopmods").show();
   $(".l4workshopmods, .l6workshopmods").hide();
}
  else if ($('#workshopcourseselect').val() == "level6"){
   $(".l6workshopmods").show();
   $(".l4workshopmods, .l5workshopmods").hide();
}

});

});

Answer 1

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

有关使用该方法的演示，请参阅：http://jsfiddle.net/BRTpN/1/

$.fn.linkToSelect= function(target) {
    target = $(target);
    //find all options in the target dropdown
    var options = target.find("option");
    //hide all except for the first
    options.filter(":gt(0)").detach();


    //listen for changes on the source select
    this.bind('change', function() {
        //get the selected value
        var value = $(this).val();
        //extract the level number
        value = /[0-9]+/.exec(value);
        if(value) {
            value = value[0];
        }
        //hide all target options except for the first
        options.filter(":gt(0)").detach();
        target.val('choosecourse');
        if(value || value === '0') {
            //reset the selected value 
            target.val('choosecourse');
            //show the once we want to keep:
            var classSelector = ".l"+ value + "workshopmods";
            options.filter(classSelector).appendTo(target);                       
        }        
    });
};
$("#workshopcourseselect").linkToSelect("#workshopmoduleselect");

​

Answer 2

实际上，我在 Chrome/MacOS X 上根本无法使用它。hide() 和 show() 的选项似乎没有任何效果。

所以我做了一个 Fiddle 并想出了一个稍微不同的技术。我实际上从第二个选择元素中删除了所有选项。然后当第一个选择发生变化时，我清空第二个选择中的所有内容，然后插入我们想要的选项：

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);
});​

Answer 3

这发生在你身上，因为最初你有一个非常大的 select 元素，有很多选项。

如果您将第 5 级的选项数量减少到几个，您将看到第 6 级可以正常工作。

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