select 正在更改以填充另一个中的特定选项 select 不适用于 safari

Question

此示例在 chrome、firefox 上运行良好...但在 Safari 上运行不正常

$("#select1").change(function() {
    var id  = $(this).val();
  $("#select2 option").each(function() {
    if ($(this).val() == id) {
      $(this).show();
    } else {
     var arrVal = $(this).val().split(',');
     if(arrVal.indexOf(id)>-1)
        $(this).show();
     else
        $(this).hide();
    }
    });
});

工作示例：https://jsfiddle.net/s41rjkhL/5/1

知道如何解决吗？ TIA

Answer 1

因为 <option> 元素在某些浏览器中无法隐藏。你可以用 <span> 包裹它来隐藏它：

$('#select1').change(function() {
    var id  = $(this).val();

    $('#select2 option').each(function() {
        var arrVal = $(this).val().split(',');

        if ($.inArray(id, arrVal) > -1) {
            if ($(this).parent('span').length)
                $(this).unwrap();
        } else {
            if ($(this).parent('select').length)
                $(this).wrap('<span>');
        }
    });
});

查看实际效果：https://jsfiddle.net/s41rjkhL/62/

select 正在更改以填充另一个中的特定选项 select 不适用于 safari

select on-change to populate specific options in another select not work on safari

javascript

safari

show

hide