Выберите изменения, которые выбраны только дважды

Question

У меня есть 2 выпадающих меню. Когда вы выбираете блок обработки из первого раскрывающегося списка $ («# HandlingUnit»), он должен читать текст метки для выбранной группы опций, а затем менять вторую на основе текста опции ....

Пример сценария:

1. Выбор 2222 от $ ("# HandlingUnit"), она читает метку OPTGROUP "случаи" и изменения $ ("# HUType") в "случаи"
2. Выбрать P00001 от $ («# HandlingUnit»), он считывает метку optgroup «Поддоны» и изменяет $ («# HUType») на «поддоны»
3. Выберите 1111 (или 2222) из ​​$ («# HandlingUnit»), он не изменяется к делам.

Это отлично работает для 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> 

Javascript/JQuery:

$(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) 
}); 

JSFiddle

Edit: JSFiddle не отвечает, как это делает в моем приложении, поэтому я думаю, что может быть что-то большее происходит .. Заглянув в него, он отчитается, если найду что-нибудь.

Answer 1

Вы можете использовать .val(function)

функцию, возвращающую значение для установки. это текущий элемент. Получает индексную позицию элемента в наборе и старое значение в качестве аргументов.

Код

$(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 

DEMO