1.基于jQuery和layer，實現(xiàn)彈出動態(tài)獲取的人員名稱，選擇并添加至輸入框，第二次顯示輸入框中已有的人員名稱且不能夠再次選擇之前已經(jīng)選擇的值。

$(function() {$.fn.extend({personlayer: function() {$(this).on("focus", function() {var a = this;$("body").after('<div id="addPerson" style="display: none;">' + '<table class="table table-bordered" id="addTable">' + "</table></div>");$.ajax({url: "這里是url",type: "post",dataType: "json",success: function(f) {var i = [];for (key in f.data) { i.push(f.data[key].name) } $("#addTable tr").remove();td = document.querySelectorAll("td");if (i.length > td.length) { var b = Math.ceil((i.length - td.length) / 5); for (var e = 0; e < b; e++) { $("#addTable").append("<tr><td></td><td></td><td></td><td></td><td></td></tr>") } } else { $("#addTable tr").remove(); for (var e = 0; e < i.length; e++) { $("#addTable").append("<tr><td></td><td></td><td></td><td></td><td></td></tr>") } } $("#addTable td").on("click", function() {$(this).toggleClass("in");$(".in").css({ "background": "rgba(255, 151, 25, 0.8)" })});var g;var k = document.querySelectorAll("td");var m = a.value,c = m.toString(),j = c.split(";");var h = [];for (var d = 0; d < j.length; d++) { h.push(j[d]) } setTimeout(function() {for (var n = 0; n < i.length; n++) { k[n].innerText = i[n] }for (var n = 0; n < k.length; n++) {for (var l = 0; l < h.length; l++) {if (h[l] == k[n].innerText) {k[n].style.backgroundColor = "#eee";k[n].style.pointerEvents = "none";k[n].classList.remove("in")}}}}, 100)},error: function() { alert(data.msg) }});layer.open({ title: "人員名冊", type: 1, area: ["400px", "400px"], content: $("#addPerson"), fix: false, btn: ["確定", "取消"], yes: function(b) { ins = document.querySelectorAll(".in"); for (var c = 0; c < ins.length; c++) { a.value += ins[c].innerText + ";" } layer.close(b) }, cancel: function() { return true }, btn2: function(b) { return true } })})}});$(".allowperson").personlayer() });

總結(jié)

以上是生活随笔為你收集整理的动态获取姓名，弹出花名册的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。