如何实现具有多个选择的下拉列表并检索所选元素

How to Implement dropdown list with multiple selections and retrieve the selected elements

本文关键字：下拉列表 选择 检索 元素 何实现 实现      更新时间：2023-09-26

我对django和html很陌生，在这里我使用的是django Web框架，我想创建一个包含多个选择和一个按钮的下拉列表，单击按钮后，我想检索选定的元素

我对html和django非常陌生，请详细解释

提前致谢

首先通过上下文传递所有详细信息，例如 

def list_view(request):
    templateVar = {}
    templateVar['countryList'] = Country.objects.all()
    return render(request, 'base.html', templateVar)

之后在您的 HTML 中

<div class="formField">
    <label><span>Country</span></label>
    <div class="chosenSelect">
        <select style="width:100%;"  class="chosen-select" name="country" id="country" tabindex="1">
            <option value=""></option>
        {% for country in countryList %}
            <option value="{{ country.id }}" {% if country.id == newDataCountry %}  selected="selected" {% endif %}>{{ country.country_name | safe }}</option>
        {% endfor %}
        </select>
     </div>             
</div>

如果您正在查看级联下拉列表，请参阅此链接以在简单的jquery的帮助下完成所需的任务。

链接

参考Arun P Johnny的回答，他也提供了一个演示。

jQuery(function($) {
var locations = {
    'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
    'Spain': ['Barcelona'],
    'Hungary': ['Pecs'],
    'USA': ['Downers Grove'],
    'Mexico': ['Puebla'],
    'South Africa': ['Midrand'],
    'China': ['Beijing'],
    'Russia': ['St. Petersburg'],
}
var $locations = $('#location');
$('#country').change(function () {
    var country = $(this).val(), lcns = locations[country] || [];
    var html = $.map(lcns, function(lcn){
        return '<option value="' + lcn + '">' + lcn + '</option>'
    }).join('');
    $locations.html(html)
});

}）;

相关文章：