Javascript 选择仅选择两次的更改

我有两个下拉列表。当您从第一个下拉菜单$HandlingUnit中选择处理单元时，它应该读取所选选项组的标签文本，然后根据选项的文本更改第二个

示例场景：

从$HandlingUnit中选择2222，它将读取optgroup标签Cases并将$HUType更改为Cases 从$HandlingUnit中选择P00001，它将读取optgroup标签托盘并将$HUType更改为托盘 从$HandlingUnit中选择1111或2222，它不会更改为Cases。 这对于2个更改非常有效，但是第三次，第二个下拉列表没有更改

<label class="label_long" for="HandlingUnit">Handling Unit:</label>
<select id="HandlingUnit" required="" name="HandlingUnit">
    <optgroup id="Pallets" label="Pallets">
        <option value="P00001">P00001</option>
    </optgroup>
    <optgroup id="Cases" label="Cases">
        <option value="1111">1111</option>
        <option value="2222">2222</option>
    </optgroup>
</select>

<label class="label_long" for="HuType">Handling Unit Type: </label>
<select id="HUType" name="HUType">
    <option value="1" name="Pallets"> Pallets </option>
    <option value="0" name="Case" selected="selected"> Cases </option>
    <option value="3" name="Items"> Items </option>
</select>

编辑：JSFIDLE在我的应用程序中没有做出响应，所以我认为可能会有更大的变化。。。如果我发现任何东西，我会向您报告。

您可以使用

返回要设置的值的函数。这是当前元素。接收集合中元素的索引位置和旧值作为参数

代码

$(document).on("change", "select#HandlingUnit", function() {
    var selected = $(":selected", this).parent().attr('label');

    $("#HUType").find("option:selected").removeAttr("selected");

    $("#HUType option").filter(function() {
        console.log(this.text.trim() + " >> " + selected);
        return this.text.trim() == selected;
    }).attr("selected", true)
});

$(document).on("change", "select#HandlingUnit", function() {
    var selected = $(":selected", this).parent().attr('label');

    //Find option with selected label and set its value
    $("#HUType").val(function(){
        return $(this).find('option[name="' + selected  +'"]').val();
    });
});

$("select#HandlingUnit").trigger("change"); //Trigger on page load