javascript - Jquery - optgroup hide() 在单击之前不会刷新下拉列表

Question

我试图根据从单选按钮中选择的值在下拉列表中隐藏 optgroup。一切正常，除了下拉列表不会立即刷新(它可能已经有之前的预选值，不管它属于哪个optgroup)。

$('input[id*="school_type"]').on("change",function(){
        if ($(this).is(':checked')) {
          var selectedVal=($(this).next().text()); 
          $("#id_school_sub_type > optgroup").hide(); 
          $('#id_school_sub_type > optgroup[label="'+selectedVal+'"]').show();
        }
    });

JS Fiddle

optgroup 仅在用户单击后续下拉列表时隐藏或显示。是否可以立即“刷新”它？

Answer 1

在隐藏之前删除该项目的选择:

$('input[id*="school_type"]').on("change",function(){
    if ($(this).is(':checked')) {
      var selectedVal=($(this).next().text()); // using next() so we can get the verbose value from the <span> next to <input>
      $("#id_school_sub_type").val('');
      $("#id_school_sub_type > optgroup").hide(); 
      $('#id_school_sub_type > optgroup[label="'+selectedVal+'"]').show();
    }
});

如果也想进行选择，请添加以下行:

$("#id_school_sub_type").val($('#id_school_sub_type optgroup[label="'+selectedVal+'"] option:first').val());

Fiddle