Select2动态选项

Question

打扰我的菜鸟问题，我正在使用 Select2 ，当用户从我的第一个选择（#metal）中选择一个选项时，我想要的是我想隐藏/显示或更新我的第二个选项选择（#purity）。

<select id="metal">
    <option>Gold</option>
    <option>Silver</option>
</select>

和

<select id="purity">
    <option data-id="1">14K</option>
    <option data-id="1">22K</option>
    <option data-id="2">70%</option>
    <option data-id="2">80%</option>
    <option data-id="2">90%</option>  
</select>

如果用户选择白银，我不想仅显示70％/ 80％/ 90％选项的14k和22k选项，反之亦然。

在将Select2添加到项目中之前，我已经完成了这项工作，即侦听#metal的更改，然后根据类似数据的数据ID隐藏并显示#pruity。

if( $('#metal :selected').text() === "Gold") {
    $('#purity option[data-id="2"]').hide()
} else...

现在将 Select2 添加到项目中，此功能将不再起作用。我的问题是，根据第一个#metal选择来更新第二个选择框的最佳方法是什么。

  

谢谢您的时间！