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

Question

I am very new to django and html, here i am using django web framework i want to create a dropdown list with multiple selections and a button, after clicking on the button i want to retrieve the elements selected

I am very much new to html and django kindly explain in detail

Thanks in advance

Answer 1

see first pass all the details via context like

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

after that in your 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>

Answer 2

If you are looking at cascading drop down lists, refer to this link to do the required task with the help of simple jquery.

Link

Refer to Arun P Johnny's answer who also provides a Demo.

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)
});

});