第二个下拉列表基于第一个下拉列表选定项填充答案

【问题标题】：2nd Dropdown list populate based on 1st Dropdown list selected item第二个下拉列表基于第一个下拉列表选定项填充
【发布时间】：2017-02-07 04:06:09
【问题描述】：

我想在 html 中读取 2。

FIRST SELECT 是静态的

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

SECOND SELECT是Dynamic，应该根据FIRST SELECT从 MySQL 数据库中填充。

【问题讨论】：

标签： mysql select drop-down-menu option populate

【解决方案1】：

您可以使用 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>

【讨论】：

假设我有get_data.php...我应该把它放在哪里？
在“url”中粘贴该文件的链接。因此，当文件在服务器上运行时，它将能够访问该文件并以 json 格式提供结果。
url =' get_data.php' ulr: url

【解决方案2】：

一种方法是使用 jquery 处理下拉更改事件，并在该事件上进行 ajax 调用以获取下拉选项作为先前选择的下拉。

例如：

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

【讨论】：

非常广泛，你能给我举个例子吗？谢谢。
假设我有get_date.php，如何填充第二个选择？