Bootstrap-select not working with dynamically populated dropdown

Question

My Form looks like:

<form action="/submit/" method="post" >{% csrf_token %}
<div class="col-lg-4 col-lg-offset-4">
<div class="form-group has-feedback">
<label class="control-label" for="inputSuccess2">Enter twitter username</label>
<input type="text" class="form-control" id="inputSuccess2", name='user'/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
<div class="text-center">

<label class="control-label" for="inputSuccess2">Select Job Type</label><br>
<select  class="selectpicker" id="type" name="type"></select>
<br>
<div class="btn-group">
    <select  name="specialization" id="specialization"></select>
    <br/></div>
    <script language="javascript">
        populateCountries("type", "specialization");
    </script>
    <br/>
    <input class="btn btn-primary" type="submit" value="Submit">
    </div>
    </div>
    </div>
</form>

and the js file for the drop down looks like this:

var country_arr = new Array("Social Service and Education","Business and Sales","Language and Arts","Engineering and Technology", "Information Technology" );

// States
var s_a = new Array();
s_a[0] = "Please Select One";
s_a[1]="Counselor|School or Career Counselor|Community Service Manager|Social Worker|Preschool Teacher|Librarian|Professor|Psychologist";
s_a[2]="Sales Agent|Real Estate Agent|Accountant|Budget Analyst|Cost Estimator|Sales Engineer";
s_a[3]="Graphic Designer|Musician|Editor|Photographer|Translator|Artist";
s_a[4]="Chemical Engineer|Civil Engineer|Electronics Engineer|Environmental Engineer|Mechanical Engineer";
s_a[5]="Computer Programmer|Database Administrator|Software Developer|Web Developer";


function populateStates(countryElementId, stateElementId) {

    var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;

    var stateElement = document.getElementById(stateElementId);

    stateElement.length = 0; // Fixed by Julian Woods
    stateElement.options[0] = new Option('Select Specialization', '');
    stateElement.selectedIndex = 0;

    var state_arr = s_a[selectedCountryIndex].split("|");

    for (var i = 0; i < state_arr.length; i++) {
        stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
    }
}

function populateCountries(countryElementId, stateElementId) {
    // given the id of the <select> tag as function argument, it inserts <option> tags
    var countryElement = document.getElementById(countryElementId);
    countryElement.length = 0;
    countryElement.options[0] = new Option('Select Job Type', '-1');
    countryElement.selectedIndex = 0;
    for (var i = 0; i < country_arr.length; i++) {
        countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]);
    }
    $countryElementy.selectpicker('refresh');
    // Assigned all countries. Now assign event listener for the states.

    if (stateElementId) {
        countryElement.onchange = function () {
            populateStates(countryElementId, stateElementId);
        };
    }
}

Hoowever, the drop down doesnt work. If i remove the selectpicker class, I lose the styling.

Is there a way i can use the bootstrap styling along with this code?

Answer 1

Why you need to use javascript for populate the select?

Just save the values necessary in a list in your view and print them in the select in the template.

example:

<select id="id_select" name="select">
    <option value="">your select</option>
    {% for value in yourdata %}
            <option value="{{value}}">{{ value }}</option>
        {% endif %}
    {% endfor %}
</select>

and use the bootstrap style :)