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()编写，如 normal 。

Answer 3

感谢大家。我能够使用以下代码片段。虽然并不复杂，但唯一与其他默认禁用下拉列表不同的是，我只希望禁用值而不是下拉列表。

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

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

3 个答案: