在动态选择上运行Pretty Dropdown

时间:2018-10-17 23:05:01

标签: javascript jquery forms select dropdown

我为下拉菜单使用了漂亮的下拉菜单(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();,但没有运气。有想法吗?

1 个答案:

答案 0 :(得分:1)

使用prettyDropdown运行id方法。

$(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" />