前端 前端框架 javascript 给layui select 添加close图标,删除选项

效果如下：

样式引用：layui.css

代码：form.js

1.大概120行左右（点击close图标，清空下拉框的选项）

2.大概190行左右（选择下拉框的值，当选择的内容有value值的时候显示close图标，否则不显示）

3.大概230行左右（根据当前渲染的下拉框是否有值或者是否disabled来加入close图标）

4.大概250行左右（渲染下拉框的时候，如果初始化的时候有值，但是却没有设置value等于空的option，也不需要close图标）

最后贴入修改后的完整代码：

/** layui-v2.5.7 MIT License */;

layui.define("layer", function (e) {

"use strict";

var t = layui.$,

i = layui.layer,

a = layui.hint(),

n = layui.device(),

l = "form",

r = ".layui-form",

s = "layui-this",

o = "layui-hide",

c = "layui-disabled",

u = function () {

this.config = {

verify: {

required: [/[\S]+/, "必填项不能为空"],

phone: [/^1\d{10}$/, "请输入正确的手机号"],

email: [/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],

url: [/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],

number: function (e) {

if (!e || isNaN(e)) return "只能填写数字"

},

date: [/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/,

"日期格式不正确"

],

identity: [/(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]

}

}

};

u.prototype.set = function (e) {

var i = this;

return t.extend(!0, i.config, e), i

}, u.prototype.verify = function (e) {

var i = this;

return t.extend(!0, i.config.verify, e), i

}, u.prototype.on = function (e, t) {

return layui.onevent.call(this, l, e, t)

}, u.prototype.val = function (e, i) {

var a = this,

n = t(r + '[lay-filter="' + e + '"]');

return n.each(function (e, a) {

var n = t(this);

layui.each(i, function (e, t) {

var i, a = n.find('[name="' + e + '"]');

a[0] && (i = a[0].type, "checkbox" === i ? a[0].checked = t : "radio" ===

i ? a.each(function () {

this.value == t && (this.checked = !0)

}) : a.val(t))

})

}), f.render(null, e), a.getValue(e)

}, u.prototype.getValue = function (e, i) {

i = i || t(r + '[lay-filter="' + e + '"]').eq(0);

var a = {},

n = {},

l = i.find("input,select,textarea");

return layui.each(l, function (e, t) {

if (t.name = (t.name || "").replace(/^\s*|\s*&/, ""), t.name) {

if (/^.*\[\]$/.test(t.name)) {

var i = t.name.match(/^(.*)\[\]$/g)[0];

a[i] = 0 | a[i], t.name = t.name.replace(/^(.*)\[\]$/, "$1[" + a[i]++ + "]")

}

/^checkbox|radio$/.test(t.type) && !t.checked || (n[t.name] = t.value)

}

}), n

}, u.prototype.render = function (e, i) {

var n = this,

u = t(r + function () {

return i ? '[lay-filter="' + i + '"]' : ""

}()),

d = {

select: function () {

var e, i = "请选择",

a = "layui-form-select",

n = "layui-select-title",

r = "layui-select-none",

d = "",

f = u.find("select"),

v = function (i, l) {

t(i.target).parent().hasClass(n) && !l || (t("." + a).removeClass(a +

"ed " + a + "up"), e && d && e.val(d)), e = null

},

y = function (i, u, f) {

var y, p = t(this),

m = i.find("." + n),

k = m.find("input"),

g = i.find("dl"),

x = g.children("dd"),

b = this.selectedIndex;

if (!u) {

var C = function () {

var e = i.offset().top + i.outerHeight() + 5 - h.scrollTop(),

t = g.outerHeight();

b = p[0].selectedIndex, i.addClass(a + "ed"), x.removeClass(o),

y = null, x.eq(b).addClass(s).siblings().removeClass(s), e +

t > h.height() && e >= t && i.addClass(a + "up"), T()

},

w = function (e) {

i.removeClass(a + "ed " + a + "up"), k.blur(), y = null, e || $(

k.val(),

function (e) {

var i = p[0].selectedIndex;

e && (d = t(p[0].options[i]).html(), 0 === i &&

d === k.attr("placeholder") && (d = ""), k

.val(d || ""))

})

},

T = function () {

var e = g.children("dd." + s);

if (e[0]) {

var t = e.position().top,

i = g.height(),

a = e.height();

t > i && g.scrollTop(t + g.scrollTop() - i + a - 5), t <

0 && g.scrollTop(t + g.scrollTop() - 5)

}

};

m.on("click", function (e) {

i.hasClass(a + "ed") ? w() : (v(e, !0), C()), g.find("." +

r).remove()

}), m.find(".layui-edge").on("click", function () {

k.focus()

}), m.find(".layui-icon-close").on("click", function (e) {

g.children(".layui-select-tips").click();

k.click();

}), k.on("keyup", function (e) {

var t = e.keyCode;

9 === t && C()

}).on("keydown", function (e) {

var t = e.keyCode;

9 === t && w();

var i = function (t, a) {

var n, l;

e.preventDefault();

var r = function () {

var e = g.children("dd." + s);

if (g.children("dd." + o)[0] && "next" ===

t) {

var i = g.children("dd:not(." + o +

",." + c + ")"),

n = i.eq(0).index();

if (n >= 0 && n < e.index() && !i

.hasClass(s)) return i.eq(0).prev()[

0] ? i.eq(0).prev() : g

.children(":last")

}

return a && a[0] ? a : y && y[0] ? y : e

}();

return l = r[t](), n = r[t]("dd:not(." + o + ")"),

l[0] ? (y = r[t](), n[0] && !n.hasClass(c) || !

y[0] ? (n.addClass(s).siblings()

.removeClass(s), void T()) : i(t, y)) :

y = null

};

38 === t && i("prev"), 40 === t && i("next"), 13 === t && (e

.preventDefault(), g.children("dd." + s).trigger(

"click"))

});

var $ = function (e, i, a) {

var n = 0;

layui.each(x, function () {

var i = t(this),

l = i.text(),

r = l.indexOf(e) === -1;

("" === e || "blur" === a ? e !== l : r) && n++,

"keyup" === a && i[r ? "addClass" : "removeClass"](

o)

});

var l = n === x.length;

return i(l), l

},

q = function (e) {

var t = this.value,

i = e.keyCode;

return 9 !== i && 13 !== i && 37 !== i && 38 !== i && 39 !==

i && 40 !== i && ($(t, function (e) {

e ? g.find("." + r)[0] || g.append(

'

无匹配项

.find("." + r).remove()

}, "keyup"), "" === t && g.find("." + r).remove(),

void T())

};

f && k.on("keyup", q).on("blur", function (i) {

var a = p[0].selectedIndex;

e = k, d = t(p[0].options[a]).html(), 0 === a && d === k

.attr("placeholder") && (d = ""), setTimeout(

function () {

$(k.val(), function (e) {

d || k.val("")

}, "blur")

}, 200)

}), x.on("click", function () {

var e = t(this),

a = e.attr("lay-value"),

n = p.attr("lay-filter");

if (a) {

m.find(".layui-icon-close").show();

} else {

m.find(".layui-icon-close").hide();

}

return !e.hasClass(c) && (e.hasClass("layui-select-tips") ?

k.val("") : (k.val(e.text()), e.addClass(s)), e

.siblings().removeClass(s), p.val(a).removeClass(

"layui-form-danger"), layui.event.call(this, l,

"select(" + n + ")", {

elem: p[0],

value: a,

othis: i

}), w(!0), !1)

}), i.find("dl>dt").on("click", function (e) {

return !1

}), t(document).off("click", v).on("click", v)

}

};

f.each(function (e, l) {

var r = t(this),

o = r.next("." + a),

u = this.disabled,

d = l.value,

f = t(l.options[l.selectedIndex]),

v = l.options[0];

if ("string" == typeof r.attr("lay-ignore")) return r.show();

var h = "string" == typeof r.attr("lay-search"),

p = v ? v.value ? i : v.innerHTML || i : i,

m = t(['

].join(""));

o[0] && o.remove(), r.after(m), y.call(this, m, u, h)

if (r.next().find(".layui-select-tips").length == 0) {

r.next().find(".layui-icon-close").remove();

}

})

},

checkbox: function () {

var e = {

checkbox: ["layui-form-checkbox", "layui-form-checked", "checkbox"],

_switch: ["layui-form-switch", "layui-form-onswitch", "switch"]

},

i = u.find("input[type=checkbox]"),

a = function (e, i) {

var a = t(this);

e.on("click", function () {

var t = a.attr("lay-filter"),

n = (a.attr("lay-text") || "").split("|");

a[0].disabled || (a[0].checked ? (a[0].checked = !1, e

.removeClass(i[1]).find("em").text(n[1])) : (a[0]

.checked = !0, e.addClass(i[1]).find("em").text(n[

0])), layui.event.call(a[0], l, i[2] + "(" + t +

")", {

elem: a[0],

value: a[0].value,

othis: e

}))

})

};

i.each(function (i, n) {

var l = t(this),

r = l.attr("lay-skin"),

s = (l.attr("lay-text") || "").split("|"),

o = this.disabled;

"switch" === r && (r = "_" + r);

var u = e[r] || e.checkbox;

if ("string" == typeof l.attr("lay-ignore")) return l.show();

var d = l.next("." + u[0]),

f = t(['

].join(""));

d[0] && d.remove(), l.after(f), a.call(this, f, u)

})

},

radio: function () {

var e = "layui-form-radio",

i = ["", ""],

a = u.find("input[type=radio]"),

n = function (a) {

var n = t(this),

s = "layui-anim-scaleSpring";

a.on("click", function () {

var o = n[0].name,

c = n.parents(r),

u = n.attr("lay-filter"),

d = c.find("input[name=" + o.replace(/(\.|#|\[|\])/g,

"\\$1") + "]");

n[0].disabled || (layui.each(d, function () {

var a = t(this).next("." + e);

this.checked = !1, a.removeClass(e + "ed"), a

.find(".layui-icon").removeClass(s).html(i[

1])

}), n[0].checked = !0, a.addClass(e + "ed"), a.find(

".layui-icon").addClass(s).html(i[0]), layui.event

.call(n[0], l, "radio(" + u + ")", {

elem: n[0],

value: n[0].value,

othis: a

}))

})

};

a.each(function (a, l) {

var r = t(this),

s = r.next("." + e),

o = this.disabled;

if ("string" == typeof r.attr("lay-ignore")) return r.show();

s[0] && s.remove();

var u = t(['

].join(""));

r.after(u), n.call(this, u)

})

}

};

return e ? d[e] ? d[e]() : a.error("不支持的" + e + "表单渲染") : layui.each(d, function (e, t) {

t()

}), n

};

var d = function () {

var e = null,

a = f.config.verify,

s = "layui-form-danger",

o = {},

c = t(this),

u = c.parents(r),

d = u.find("*[lay-verify]"),

v = c.parents("form")[0],

h = c.attr("lay-filter");

return layui.each(d, function (l, r) {

var o = t(this),

c = o.attr("lay-verify").split("|"),

u = o.attr("lay-verType"),

d = o.val();

if (o.removeClass(s), layui.each(c, function (t, l) {

var c, f = "",

v = "function" == typeof a[l];

if (a[l]) {

var c = v ? f = a[l](d, r) : !a[l][0].test(d);

if (f = f || a[l][1], "required" === l && (f = o.attr("lay-reqText") ||

f), c) return "tips" === u ? i.tips(f, function () {

return "string" == typeof o.attr("lay-ignore") ||

"select" !== r.tagName.toLowerCase() && !

/^checkbox|radio$/.test(r.type) ? o : o.next()

}(), {

tips: 1

}) : "alert" === u ? i.alert(f, {

title: "提示",

shadeClose: !0

}) : /\bstring|number\b/.test(typeof f) && i.msg(f, {

icon: 5,

shift: 6

}), n.android || n.ios || setTimeout(function () {

r.focus()

}, 7), o.addClass(s), e = !0

}

}), e) return e

}), !e && (o = f.getValue(null, u), layui.event.call(this, l, "submit(" + h + ")", {

elem: this,

form: v,

field: o

}))

},

f = new u,

v = t(document),

h = t(window);

f.render(), v.on("reset", r, function () {

var e = t(this).attr("lay-filter");

setTimeout(function () {

f.render(null, e)

}, 50)

}), v.on("submit", r, d).on("click", "*[lay-submit]", d), e(l, f)

});

精彩内容

 您阅读本篇文章共花了：