Add Dynamic field to bootstrap multiple select dropdown list

Question

Is there any way to add fields dynamically to multiple select dropdownlist. Here is what i have tried

$('.applicationNameSelectClass').multiselect({
         numberDisplayed: 1,
        enableFiltering: true
});

function addField(){
    var val =document.getElementById("addField").value;
    $('#selectList').append('<option>'+val+'</option>');
}

<body>
Dynamically Add DropDown Field...<BR><BR>
<input type="text" id="addField"/>

<input type="button" id="theButton" value="AddField!" onclick="addField();">
<select id="selectList" name="applicationNames" class="applicationNameSelectClass" multiple="multiple" style="width: 147px; " >
    <option><c:out value="Option-1"/></option>
    <option><c:out value="Option-2"/></option>
    <option><c:out value="Option-3"/></option>
    <option><c:out value="Option-4"/></option>
    </select>
</body>

enter image description here

jmartins · Accepted Answer · 2015-03-05 19:11:44Z

1

Seems like the onclick bind is not working for you inside the input element: onclick="addField();" Not sure why, but might be the order you're loading your page. I suggest you to use this code for binding click event:

$('#theButton').click(function() {
    var val = document.getElementById("addField").value;
    $('#selectList').append('<option>'+val+'</option>');
});

Remember to put it inside an ondomready context, like this Fiddle

edited Mar 5, 2015 at 19:11

answered Mar 5, 2015 at 19:06

jmartins

9914 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

harpal18 Over a year ago

Thanks @jmartins for helping me out but still its not working...i have updated question with screen shot

jmartins Over a year ago

Why not? It is working on this Fiddle. The only difference is that I didn't put bootstrap on it

harpal18 Over a year ago

without applying bootstrap plugin it works, but once you apply bootstrap plugin to dropdown list it's not working

Collectives™ on Stack Overflow

Add Dynamic field to bootstrap multiple select dropdown list

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related