Hi mahesh213,
You have to apply the chosen plugin after all the option added to the dropdownlist. Refer below modified code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult getProductCategories()
{
List<Categorty> items = new List<Categorty>();
items.Add(new Categorty { CategoryID = 1, CategortyName = "Cat 1" });
items.Add(new Categorty { CategoryID = 2, CategortyName = "Cat 2" });
items.Add(new Categorty { CategoryID = 3, CategortyName = "Cat 3" });
return Json(items, JsonRequestBehavior.AllowGet);
}
public class Categorty
{
public string CategortyName { get; set; }
public int CategoryID { get; set; }
}
}
View
<body>
<div class="container">
<div class="details">
<table class="table table-responsive">
<tr>
<td>Name</td>
<td>Rate</td>
<td></td>
</tr>
<tr class="mycontainer" id="mainrow">
<td>
<select id="ddlProducts" class="pc form-control">
</select>
</td>
<td><input type="button" id="btnAdd" value="Add" class="btn btn-success" /></td>
</tr>
</table>
<hr />
<div id="orderItems">
<table class="table table-responsive" id="orderdetailsItems"></table>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<style type="text/css">
.pc
{
width: 400px;
}
</style>
<script type="text/javascript">
var Categories = [];
function LoadCategory(element) {
if (Categories.length == 0) {
$.ajax({
type: "GET",
url: '/Home/getProductCategories',
success: function (data) {
Categories = data;
renderCategory(element);
}
})
} else {
renderCategory(element);
}
}
function renderCategory(element) {
var $ele = $(element);
$ele.empty();
$ele.append($('<option/>').val('0').text('Select'));
$.each(Categories, function (i, val) {
$ele.append($('<option/>').val(val.CategoryID).text(val.CategortyName));
});
$('#ddlProducts').chosen();
}
$(document).ready(function () {
LoadCategory($('#ddlProducts'));
$('#btnAdd').click(function () {
var $newRow = $('#mainrow').clone().removeAttr('id');
$('.pc', $newRow).val($('#ddlProducts').find('option:selected').val()).show();
$newRow.find('#ddlProducts_chosen').remove();
$('#ddlProducts,#btnAdd', $newRow).removeAttr('id');
$('#orderdetailsItems').append($newRow);
$('.pc').chosen();
})
});
</script>
</body>
Screenshot
