Menu
I have problem with setting up multiselect dropdown menu.. HTML Multiselect dropdown Java Script not working at when Add Multiple Fields.
This is my fill script link – <https://jsfiddle.net/13yeasedu/j6gd5kvo/12/
` <link href=”https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=”anonymous”> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script><script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script><script src=”https://code.jquery.com/jquery-1.4.3.min.js” integrity=”sha256-+ACzmeXHpSVPxmu0BxF/44294FKHgOaMn3yH0pn4SGo=” crossorigin=”anonymous”></script><script src=”https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js”></script><link rel=”stylesheet” href=”https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css”>
“`
<div id=”Multiple-Fields”>
<p>
<label for=”items_list”>
<select name=”items_lists” id=”choices-multiple” placeholder=”Please Select The Items” multiple>
<option value=”Item 1″>Item 1</option>
<option value=”Item 2″>Item 2</option>
</select>
</label>
</p>
</div>
<h6><a href=”#” id=”add_Multiple-Fields”>Add Multiple Fields</a></h6>
“`
<script>
$(document).ready(function(){
var multipleCancelButton = new Choices(‘#choices-multiple’, {
removeItemButton: true,
maxItemCount:5,
searchResultLimit:5,
renderChoiceLimit:5
});
});
</script>
“`
<script>
$(function() {
var scntDiv = $(‘#Multiple-Fields’);
var i = $(‘#Multiple-Fields p’).size() + 1;
$(‘#add_Multiple-Fields’).live(‘click’, function() {
$(‘<p> <label for=”items_list”><select name=”items_lists” id=”choices-multiple” placeholder=”Please Select The Items” multiple><option value=”Item 1″>Item 1</option><option value=”Item 2″>Item 2</option></select></label> <a href=”#” id=”rem_Multiple-Fields”>Remove</a></p>’).appendTo(scntDiv);
i++;
return false;
});
$(‘#rem_Multiple-Fields’).live(‘click’, function() {
if( i > 2 ) {
$(this).parents(‘p’).remove();
i–;
}
return false;
});
});
</script>