Question

我想在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 动态，应根据 FIRST SELECT 从MySQL数据库中填充。

Answer 1

一种方法是使用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

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 CALL

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

第二个下拉列表根据第一个下拉列表选择项目填充

2 个答案: