Skip to content

Instantly share code, notes, and snippets.

@sudhir600

sudhir600/dynamically_chosen.html

Created July 12, 2019 06:54
Show Gist options
  • Save sudhir600/a5e5c69097187eb576c54d714d63c717 to your computer and use it in GitHub Desktop.
Save sudhir600/a5e5c69097187eb576c54d714d63c717 to your computer and use it in GitHub Desktop.
Download ZIP
Apply Jquery Chosen On Dynamically Added Select-element
Raw
dynamically_chosen.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css">
</head>
<body>
<div style="margin-bottom:10px;display: inline-block;">
<div class="here">
<select data-placeholder="choose Team" class="chosen-select" id="abcd">
<option value=""></option>
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
</select>
</div>
</div>
<input type="button" value="clone" class="clone" />
<script src="https://harvesthq.github.io/chosen/docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<!-- <script src="https://harvesthq.github.io/chosen/docsupport/init.js" type="text/javascript" charset="utf-8"></script> -->
<script>
// If you don't want to use init.js then add below line to excute chosen onLoad
$('.chosen-select, .chosen-select-deselect').chosen()
$('.clone').click(function() {
$(".chosen-select").chosen("destroy")
$('.here').append($('#abcd').get(0).outerHTML)
$('.chosen-select').chosen()
})
</script>
<style>
.here {
margin-left: 30px;
float: left
}
.author{
font-size:11px;
position:absolute;
bottom:0px;
left:0px;
}
</style>
<i class="author">Sudhir K gupta</i>
</body>
</html>
@sudhir600
Copy link
Author

JSFiddle - https://jsfiddle.net/sudhir600/2f71xmLz/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment