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

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

Answer 2

解决方案：考虑以下JSFiddle 作为解决方案

注意：我已将执行您的请求所需的代码减至最少。关键因素是以下代码需要包含在它自己的更改事件中。

selectedStoredValue = $("option:selected", this).text(); 

根据this StackOverflow post

还请注意，window.toggle = function() 仅用于 JSFiddle 用途，可以在您的脚本代码中写成 function toggle()，如 正常。

Answer 3

感谢大家。我能够使用以下代码 sn-p 使其工作。虽然并不复杂，但与其他默认禁用下拉菜单不同的是，我只希望禁用这些值而不是下拉菜单。

var selectedStoredValue = "";

$(document).ready(function(){
$('select#crude').find('option').each(function() {
    $(this).prop('disabled', true);
});

$('select#semi_refined_product').find('option').each(function() {
    $(this).prop('disabled', true);
});

$('select#refined_petroleum_product').find('option').each(function() {
    $(this).prop('disabled', true);
});

  $("#producttype").change(function(){
      if($("#producttype").prop('selectedIndex')== "1"){
        $('select#crude').find('option').each(function() {
            $(this).prop('disabled', false);
        });
    }
    else{
      $('select#crude').find('option').each(function() {
            $(this).prop('disabled', true);
            selectedStoredValue = "";
        });
    }
  });
  $("#crude").change(function(){
        if($("#crude").prop('selectedIndex') >0 ){
          selectedStoredValue = $("#crude option:selected").text();
          $("#selectedProductType").val(selectedStoredValue);
      }
    });

  $("#producttype").change(function(){
      if($("#producttype").prop('selectedIndex')== "2"){
        $('select#semi_refined_product').find('option').each(function() {
            $(this).prop('disabled', false);
            selectedStoredValue = $( "#semi_refined_product option:selected" ).text();
        });
    }
    else{
      $('select#semi_refined_product').find('option').each(function() {
            $('#semi_refined_product').val('');
            $(this).prop('disabled', true);
            selectedStoredValue = "";
        });
    }
  });

    $("#semi_refined_product").change(function(){
        if($("#semi_refined_product").prop('selectedIndex') >0 ){
          selectedStoredValue = $("#semi_refined_product option:selected").text();
          $("#selectedProductType").val(selectedStoredValue);
      }
    });

   $("#producttype").change(function(){
      if($("#producttype").prop('selectedIndex')== "3"){
        $('select#refined_petroleum_product').find('option').each(function() {
            $(this).prop('disabled', false);
            selectedStoredValue = $( "#refined_petroleum_product option:selected" ).text();
        });
    }
    else{
      $('select#refined_petroleum_product').find('option').each(function() {
            $('#refined_petroleum_product').val('');
            $(this).prop('disabled', true);
            selectedStoredValue = "";
        });
    }
  });
   $("#refined_petroleum_product").change(function(){
        if($("#refined_petroleum_product").prop('selectedIndex') >0 ){
          selectedStoredValue = $("#refined_petroleum_product option:selected").text();
          $("#selectedProductType").val(selectedStoredValue);
      }
    });
   console.log(selectedStoredValue);
});