添加动态字段以引导多个选择下拉列表

时间:2015-03-05 18:18:59

标签: jquery twitter-bootstrap

有没有办法动态地将字段添加到多个选择下拉列表中。 这是我试过的

$('.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

1 个答案:

答案 0 :(得分:1)

似乎onclick bind在输入元素中不起作用:onclick="addField();"不确定原因,但可能是您正在加载页面的顺序。我建议你使用这个code来绑定点击事件:

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

请记住将其置于ondomready上下文中,例如Fiddle