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

$(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() });

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。