Question

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

示例场景：

从$（＆＃34;＃HandlingUnit＆＃34;）中选择2222，它会读取optgroup标签＆＃34; Cases＆＃34;并将$（＆＃34;＃HUType＆＃34;）更改为＆＃34;案例＆＃34;
从$（＆＃34;＃HandlingUnit＆＃34;）中选择P00001，它会读取optgroup标签＆＃34; Pallets＆＃34;并将$（＆＃34;＃HUType＆＃34;）更改为＆＃34; Pallets＆＃34;
从$（＆＃34;＃HandlingUnit＆＃34;）中选择1111（或2222），它不会更改为个案。

这适用于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

编辑：JSFiddle没有回应它在我的应用程序中的作用，所以我认为可能会有更大的事情发生...如果我找到任何东西，调查它会报告。

Answer 1

您可以使用.val(function)

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

代码的

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

选择仅两次选择的更改

1 个答案: