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