将所选选项附加到.detach-Laravel，jQuery之后的下拉框/选择框中

Question

周一快乐！

因此，我发现我无法在IE、Edge和safari中使用.hide和.show，我发现自己正在使用.declact来删除筛选后的下拉选项。

唯一的问题是，如果我想在"分段"选择框中进行不同的选择，我无法在使用后取回所有选项。

我试过了。附加和。准备好了，但没有用！

HTML如下

<select class="form-control" id="sector">
<option selected>PLEASE CHOOSE A SECTOR </option>
<option value="1">COLOUR</option>                   
<option value="2">VEHICLE</option> 
<option selected>PLEASE CHOOSE AN OPTION...</option>
<option value="1" data-sector="1">BLACK</option>
<option value="2" data-sector="1">GREEN</option>
<option value="3" data-sector="1">BLUE</option>
<option value="1" data-sector="2">CAR</option>
<option value="2" data-sector="2">PLANE</option>
<option value="3" data-sector="2">BUS</option>

jQuery如下：

$("#product option[data-sector!='" + sel + "']").detach();
$("#product option[data-sector='" + sel + "']").show();
$("#product").parent().removeClass("hidden");

，希望能在这方面提供一些帮助和建议

感谢

Mike

Answer 1

更新！

所以Safari不接受带有options标记的元素上的.hide或.show。我使用了N69S附加项目的想法，但我没有使用.html，而是将选项添加到变量中，这些变量可以在每次下拉菜单更改时添加，然后使用循环。

所以不是：

$("#product option[data-sector!='" + sel + "']").detach();
$("#product option[data-sector='" + sel + "']").show();

我现在使用：

For (var item of data_products['sector_' + sel]) {
$("#product").append('<option value="' + item.value + '">' + item.label </option>');
}

希望这能帮助其他

感谢

Mike