Get selected value from disabled and enabled dropdowns

Question

I have 4 dropdown selects, all the values in the dropdowns are disabled by default except the first one. The value selected in the first dropdown determines which of the other 3 values will be enabled. This means that of the 3 dropdowns only a value is expected to be selected. The code disables and enables as expected but, of these 3 values I'm unable to get the value of the selected element. How do I please help out.

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

Disable the selects, not the options, and you should do it initially via the html attribute: `disabled="disabled"`. Then when your selects get changed, you can compare the value of the first select and enable/disable the other selects accordingly. — The Maniac, Mar 24 '16 at 18:28
Thanks for the reply, could you provide me a simple snippet to achieve this? — ken4ward, Mar 24 '16 at 18:40

score 1 · Answer 1 · answered Mar 24 '16 at 18:46

Example 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>

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

Thank you very much. I appreciate every strength committed to assist me get this done, what I want is that the user will be able to the options but unable to select until the option has been selected in the first dropdown. — ken4ward, Mar 24 '16 at 19:03

score 1 · Answer 2 · edited May 23 '17 at 11:50

Solution: Consider the following JSFiddle as a solution

Note: I have minimized the code needed to perform your request. The key factor being the following code which needed to be included in it's own change event.

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

as per this StackOverflow post

Please also note window.toggle = function() is for JSFiddle purposes only and can be written as function toggle() like normal in your script code.

score 0 · Answer 3 · answered Mar 25 '16 at 17:41

Thanks to everyone. I was able to get it working with the following code snippet. Though not complex, the only thing that makes it different from other default disabling of dropdowns is that I only want the values to be disabled not the dropdowns.

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

Get selected value from disabled and enabled dropdowns

3 Answers3