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

Question

我在其他几个讨论中看了这个，但需要有人用简单的语言向我解释。

我有2个选择元素，我想根据第一个选择的内容更改一个选项。我有点使用下面的代码使它工作。它适用于Level 4和Level 5选项但是当我在第一个下拉列表中选择Level 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

hide / show on options在浏览器中的行为不一致。 一个简单的解决方法是使用detach / append而不是hide / show。

有关使用该方法的演示，请参阅：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动态追加和删除元素。