javascript - 在动态选择上运行 Pretty Dropdown

Question

我正在使用 Pretty Dropdowns ( https://www.npmjs.com/package/pretty-dropdowns ) 作为我的下拉菜单，并且我有一个允许用户将行附加到表单的表单。他们添加的行也包含下拉菜单，但我需要 Pretty Dropdowns 再次运行，以便它可以应用于新的下拉菜单。

这是我的 jquery:

$('#addEmployee').click(function(){

    var empLines = $("div[id^='employee']").length;

    if(empLines < 21) {
      $('#employees').append('<div id="employee'+ id +'" class="emp-wrap row"><div class="form-group quarter-group"><label for="empClass'+ id +'">Employee Classification:</label><select class="form-control" id="empClass'+ id +'" name="empClass[]" required><option value="Full-time Employee">Full-time Employee</option><option value="Manager">Manager</option><option value="Owner">Owner</option></select></div></div>');}
      removeEmployee();
    id++;
});

我尝试在函数内部和函数外部添加 $('select').prettyDropdown(); 但没有成功。想法？

Answer 1

使用 id 运行 prettyDropdown 方法。

$(document).ready(function() {
$dropdown = $('select').prettyDropdown();
  
});

var id=1;
$('#addEmployee').click(function(){
   var empLines =0;

    if(empLines < 21) {
      $('#employees').append('<div id="employee'+ id +'" class="emp-wrap row"><div class="form-group quarter-group"><label for="empClass'+ id +'">Employee Classification:</label><select class="form-control" id="empClass'+ id +'" name="empClass[]" required><option value="Full-time Employee">Full-time Employee</option><option value="Manager">Manager</option><option value="Owner">Owner</option></select></div></div>');}
      
      $('#empClass'+id).prettyDropdown()
      //removeEmployee();
    id++;
});

<link rel="stylesheet" href="/css/prettydropdowns.css">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://thdoan.github.io/pretty-dropdowns/js/jquery.prettydropdowns.js"></script>
<link rel="stylesheet" href="https://thdoan.github.io/pretty-dropdowns/css/prettydropdowns.css">


<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div>

<br/>
</div>
<div id="employees">
</div>

<input type="button" id="addEmployee" value="addEmployee" />