2. Dropdown-Liste basierend auf 1. Dropdown-Liste ausgewählten Artikel

Question

Ich möchte cread 2 in HTML.

FIRST SELECT ist Static

<select name="step"> 
<option value="Step 1">Step 1</option> 
<option value="Step 2">Step 2</option> 
<option value="Step 3">Step 3</option> 
</select>` 

Die zweite SELECTDynamic ist und sollte von MySQL-Datenbank gefüllt werden, basierend auf dem FIRST SELECT.

Answer 1

Eine Möglichkeit besteht darin, jquery zu verwenden, um das Dropdown-Änderungsereignis zu verarbeiten, und bei diesem Ereignis einen Ajax-Aufruf durchzuführen, um die Dropdown-Optionen als zuvor ausgewähltes Dropdown-Menü zu erhalten.

Ex:

HTML:

<select id="sel1"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

<select id="sel2"> 
    <option value="">Select</option> 
</select> 

JQuery:

$(document).ready(function() { 
    $('#sel1').change(function(){ 
    var selectedVal = $(this).val(); 
    // Make ajax call here and append its out put to second dropdown 
    }); 
}); 

Jquery ajax documentation

Answer 2

Sie können diese mit AJAX tun. Ich reiche ein Beispiel ein, das Sie entsprechend ändern können.

<div> 
    <select id="c_source" name="source"> 
     <option value="option1">option1</option> 
     <option value="option2">option2</option> 
    </select> 
    </div> 
    <div> 
     <select required id="c_destination" name="city"> 
     </select>      
    </div> 

Ajax-Aufruf

<script> 
     var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; 

     $("#c_source").change(function(){ 

     $.ajax({ 
      type: "GET", 
      url: $SCRIPT_ROOT + "/getdest/"+$("#c_source").val(), //Here you can call any api or backend link where you provide the connection for the details where they can be extracted 
      contentType: "application/xml; charset=utf-8", 
      success: function(data) { 
       $('#c_destination').empty(); 
       var jsonObj = JSON.parse(data); 
       $.each(jsonObj['result'], function(key, value) { 
        $('#c_destination').append($('<option></option>').attr('value', value).text(value)); 
       }); 
       }, 
      error: function(jqXHR, textStatus, errorThrown) { 
       alert(errorThrown); 
      } 
     }); 

    }); 
</script>