当另一个数据列表发生更改时更改数据列表输入

Question

我有两个这样的datalist输入。

<input list="Province" name="Province" id="1">
<datalist id="Province">
       {% for item in province_list %}
           <option >{{item.Name}}</option>
       {% endfor %}
</datalist>

<input list="City" name="City" id="2">
<datalist id="City">
       {% for item in city_list %}
           <option >{{item.Name}}</option>
       {% endfor %}
</datalist>

我想当用户选择省时，我在input2中显示该省市的列表。

Answer 1

我使用JavaScript，如下所示：

    $("input[name=Province]").on('input', function () {
        province = $(this).val();
        dataList.empty();
        $.ajax({
            url: "/get_cars_"+province,
            dataType: 'json',
            success: function (data) {
                console.log(data);
                for (var i = 0, len = data.length; i < len; i++) {
                    $("input[name=City]").append("<option value='" + 
                     data[i].city + "'></option>");

                }
            },
            error: function (req, status, err) {
                console.log('something went wrong', status, err);
            }
        });
 });

在服务器端处理"/get_cities_\w+“请求。

删除html代码中的第二个"for“语句：

<datalist id="City">
</datalist>

Django中的服务器端代码：

def getTheVendorProducts(request):
    if request.is_ajax():
    try:
        uriQueri = request.build_absolute_uri()
        province = uriQueri.split('_')[]
        province = urllib.parse.unquote(province.split('?')[0])
        vendorProduct= getTheCitiesOfprovince(province)
        return HttpResponse(convertListToJson(vendorProduct), 'application/json')
    except Exception as e:
        logging.error(e)
        return failedHttpResponse()

您需要定义自己的"getTheCitiesOfprovince“和"convertListToJson”函数。有关此类问题的更多信息，请访问here。