2-й раскрывающийся список заселен на основе 1-го раскрывающегося списка выбранного элемента

Question

Я хочу, чтобы cread 2 в html.

ПЕРВЫЙ ВЫБОР является Статическая

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

ВТОРОЙ ВЫБОР является Dynamic и должны быть заполнены из базы данных MySQL, основанный на ПЕРВОГО ВЫБОР.

Answer 1

Один из способов - использовать jquery для обработки события изменения раскрывающегося списка и в этом случае сделать ajax-вызов, чтобы получить раскрывающийся список, как ранее выбранное раскрывающееся меню.

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

Вы можете сделать это с помощью AJAX. Я представляю пример, который вы можете изменить соответствующим образом.

<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 ВЫЗОВ

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