javascript - 从禁用和启用下拉列表中获取选定的值

Question

我有 4 个下拉菜单选择，默认情况下，下拉菜单中的所有值均处于禁用状态，除了第一个值。第一个下拉列表中选择的值决定了将启用其他 3 个值中的哪一个。这意味着在 3 个下拉列表中，预计只会选择一个值。代码按预期禁用和启用，但是，在这 3 个值中，我无法获取所选元素的值。请问我该怎么帮忙。

var selectedStoredValue = "";

$(document).ready(function() {
    $('select#goodopt').find('option').each(function() {
        $(this).prop('disabled', true);
    });
    $('select#effectiveopt').find('option').each(function() {
        $(this).prop('disabled', true);
    });
    $('select#socialopt').find('option').each(function() {
        $(this).prop('disabled', true);
    });
    $("#producttype").change(function() {
        if ($("#producttype").prop('selectedIndex') == "1") {
            $('select#goodopt').find('option').each(function() {
                $(this).prop('disabled', false);
            });
        } else {
            $('select#goodopt').find('option').each(function() {
                $(this).prop('disabled', true);
                selectedStoredValue = "";
            });
        }
    });
    $("#producttype").change(function() {
        if ($("#producttype").prop('selectedIndex') == "2") {
            $('select#effectiveopt').find('option').each(function() {
                $(this).prop('disabled', false);
                selectedStoredValue = $("#effectiveopt option:selected").text();
            });
        } else {
            $('select#effectiveopt').find('option').each(function() {
                $('#effectiveopt').val('');
                $(this).prop('disabled', true);
                selectedStoredValue = "";
            });
        }
    });
    $("#producttype").change(function() {
        if ($("#producttype").prop('selectedIndex') == "3") {
            $('select#socialopt').find('option').each(function() {
                $(this).prop('disabled', false);
                selectedStoredValue = $("#socialopt option:selected").text();
            });
        } else {
            $('select#socialopt').find('option').each(function() {
                $('#socialopt').val('');
                $(this).prop('disabled', true);
                selectedStoredValue = "";
            });
        }
    });
    console.log(selectedStoredValue);
});

Answer 1

示例 HTML:

<select id="select_1">
    <option value="enable_select_2">Enable 2</option>
    <option value="enable_select_3">Enable 3</option>
</select>

<select id="select_2" class="sub-select" disabled="disabled">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="select_3" class="sub-select" disabled="disabled">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

示例 JS:

$('#select_1').change(function() {
    // First disable all selects that have the class "sub-select"
    $('select.sub-select').disable();

    // Now enable the correct select
    if ($(this).val() == 'enable_select_1') {
        $('#select_1').enable();
    } else if ($(this).val() == 'enable_select_2') {
        $('#select_2').enable();
    }
});