Seçilen değeri devre dışı bırakılmış ve etkinleştirilmiş düşmelerden al

Question

4 açılır seçmem var, açılır menüdeki tüm değerler, ilk hariç olmak üzere varsayılan olarak devre dışıdır. İlk açılır menüde seçilen değer, diğer 3 değerin hangisinin etkinleştirileceğini belirler. Bu, 3 açılır kapanışın yalnızca bir değerin seçileceği anlamına gelir. Kod beklendiği gibi devre dışı bırakır ve etkinleştirir, ancak bu 3 değerden seçilen elemanın değerini alamıyorum. Nasıl yardım edebilirim lütfen.

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

örnek 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> 

Örnek 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

Çözüm: Ben hav:

Not çözüm olarak aşağıdaki JSFiddle düşünün e talebinizi gerçekleştirmek için gereken kodu en aza indirir. Anahtar faktör, kendi değişiklik etkinliğine dahil edilmesi gereken aşağıdaki koddur. this StackOverflow post

da unutmayın window.toggle = function() uyarınca

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

sadece JSFiddle amaçlıdır ve function toggle() yılında Normal gibi komut kodu olarak yazılabilir.

Answer 3

Herkese teşekkürler. Aşağıdaki kod snippet'i ile çalışmayı başarabildim. Karmaşık olmasa da, diğer varsayılanları açılır menüden devre dışı bırakan tek şey, yalnızca değerlerin devre dışı bırakılmasını değil.

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