jquery写一个可搜索下拉多选的输入框插件效果代码

代码语言:html

所属分类:表单美化

代码描述:jquery写一个可搜索下拉多选的输入框插件效果代码

代码标签: 搜索 拉多 输入 插件 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/layui.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8">

        $.extend({
            myMethod: function(id, tagData, name) {
                var html = '<div class="layui-form-item">'; html += '<label class="layui-form-label">已选择:</label>'; html += '<div class="AD">'; html += '</div>'; html += '</div>'; html += '<div class="layui-form-item">'; html += '<label class="layui-form-label">选择</label>'; html += '<div class="layui-input-inline fileId layui-form-select layui-form-selected">'; html += '<input type="text" class="layui-input" placeholder="输入或选择" autocomplete="off">'; html += '<dl style="display: none;"></dl>'; html += '</div>'; html += '</div>'; $(id).append(html)
                $(".AD").parent().hide(); $(".fileId").on("click", "dl dd", function() {
                    var id = $(this).attr("value"); if (id != undefined) {
                        $(".AD").append('<a href="javascript:;" class="label"><span lay-value="64">'+$(this).html()+'</span><input type="hidden" name="'+name+'" id="'+$(this).html()+'" value="'+id+'"/><i class="close">x</i></a>')
                        $(".AD").parent().show(); for (var i = 0; i < tagData.length; i++) {
                            if (tagData[i].id == id) {
                                tagData.splice(i, 1);
                            }}}
                    $(&q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0