මෙකෙ Add Multiple Fields දුන්නහම අලුතින් Add වෙන Field එකේ මේකෙ තියෙන Selection Field එකේ විදිහට Styles හැදිල එන්නෙ නෑ..
හේතුව කියන්න පුලුවන්ද?
හේතුව කියන්න පුලුවන්ද?
Last edited:
bootstrap broOya daala thiyena code eke CSS code mokuth nahane![]()
![]()
$('#btn-add-member').click(function(){
var templateClone = $("#template").clone();
$('#m-list').append(templateClone);
});
bootstrap bro
------ Post added on Jul 4, 2021 at 12:30 PMJavaScript:$('#btn-add-member').click(function(){ var templateClone = $("#template").clone(); $('#m-list').append(templateClone); });
<!doctype html>
<html lang="en">
<!-- Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="title" content=""/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="abstract" content=""/>
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!--<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" ></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">
<script type="text/javascript">
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiple', {
removeItemButton: true,
maxItemCount:5,
searchResultLimit:5,
renderChoiceLimit:5
});
//Link click event
$('#btn-add').click(function(){
alert('aaaa');
var templateClone = $("#Multiple-Fields").clone();
$('#element1').append(templateClone);
});
});
</script>
</head>
<!-- Body -->
<body>
<div id="element1">
<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>
<!-- duplicated element will added here -->
</div>
<button id="btn-add" class="btn btn-danger btn-sm btn-block">Add Multiple Fields</button>
</body>
</html>
එහෙම වෙන්නේ නැහැ මොකද ඒ සිලෙක්ට් එක හැදෙන්නේ උබ ඔය පාවිච්චි කරලා තියෙන Choices කියන library එකෙන්...ඒ නිසා dynamic ගහන select dom node එකට එක ආයේ call කරන්න ඕනේ..නැත්තම් ඒක වෙන්නේ නැහැ...උබ ඔක්කොම කරලා තියෙනව හරි...එත් append කරලා විතරක් මදි...ආයේ choices කියන එකත් කෝල් කරන්න...
මේක බලන්න මන් වෙනස් කරා...
අනිත් එක jquery වල .live කියන එක වෙනුවට .on එක දාන්න...
machan `name="items_lists"` `name="items_lists[]"` wenna one
code eka indent karewath naa..