在动态选择上运行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" />