Chosen (SO 28974740)
HTML
<link REL="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css"/>
<div id="myPage">
</div>
<div id="myPage2"></div>
<script type="text/template" id="mySelectTemplate">
<select class="mySelect">
<option value=''></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
</select>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
JavaScript
$(function(){
//get the template (select)
var template = $('#mySelectTemplate').html();
//add to the page (mocking a dynamic element)
$('#myPage').append(template);
//init the chosen plugin
$('#myPage .mySelect').chosen();
//listen for change event
$('#myPage .mySelect').chosen().change(function(e){
//when 'one' is selected, add another chosen.
console.log(this.value);
if ($(this).val() == 1) {
$('#myPage2').append(template);
$('#myPage2 .mySelect').chosen();
//The listener for the new select has to be attached after the select is created
//listen for change on second chosen
$('#myPage2 .mySelect').chosen().change(function(e){
console.log('change');
});
}
});
});