jQuery select下拉框如何实现多选中间用逗号隔开

小叶不耶

于 2024-09-25 14:36:07 发布

阅读量438

点赞数 8

文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/cdfdfgrd/article/details/142522664

版权

试了很多种方法都不是自己想要的

先看效果,点击蓝色就会清除这个选项

1.用了第三方库发现问题并没有解决,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入你的 CSS 文件 -->
</head>
<body>

<select name="cengmian" id="cengmian" multip>
    <option value="">请选择</option>
    <option value="风险分级管控已完成">风险分级管控已完成</option>
    <option value="风险分级管控未完成">风险分级管控未完成</option>
    <option value="隐患排查治理已完成" choose>隐患排查治理已完成</option>
    <option value="隐患排查治理未完成">隐患排查治理未完成</option>
</select>

<!-- 引入你的 JavaScript 文件 -->
<script src="path/to/your/script.js"></script>
<script>
    // 确保 DOM 完全加载后再运行
    $(document).ready(function() {
        selectMultip.register();
    });
</script>
</body>
</html>

2.建立一个js文件 ,直接引入到项目中就可以

(function() {
    selectMultip = {
        register: function(id) {
            document.querySelectorAll("[multip]").forEach(function(e) {
                render(e);
            });
        },
        reload: function(id, data, setData) {
            var htm = "";
            for(var i = 0; i < data.length; i++) {
                htm += '<option value="' + data[i].value + '">' + data[i].text + '</option>';
            }
            var e = document.getElementById(id);
            e.innerHTML = htm;
            render(e);
            this.setVal(id, setData);
        },
        setVal: function(id, str) {
            var type = Object.prototype.toString.call(str);
            switch(type) {
                case "[object String]":
                    document.getElementById(id).val = str;
                    break;
                case "[object Array]":
                    document.getElementById(id).val = str.toString();
                    break;
                default:
                    break;
            }
        },
        getVal: function(id) {
            return document.getElementById(id).val;
        }
    };

    function render(e) {
        e.param = {
            arr: [],
            valarr: [],
            opts: []
        };
        var choosevalue = "",
            op;

        for(var i = 0; i < e.length; i++) {
            op = e.item(i);
            e.param.opts.push(op);
            if(op.hasAttribute("choose")) {
                if(choosevalue == "") {
                    choosevalue = op.value;
                } else {
                    choosevalue += "," + op.value;
                }
            }
        }

        var option = document.createElement("option");
        option.hidden = true;
        e.appendChild(option);
        e.removeEventListener("input", selchange);
        e.addEventListener("input", selchange);

        Object.defineProperty(e, "val", {
            get: function() {
                return this.querySelector("[hidden]").value;
            },
            set: function(value) {
                e.param.valarr = [];
                var valrealarr = value == "" ? [] : value.split(",");
                e.param.arr = [];
                e.param.opts.filter(function(o) {
                    o.style = "";
                });
                if(valrealarr.toString()) {
                    for(var i = 0; i < valrealarr.length; i++) {
                        e.param.opts.filter(function(o) {
                            if(o.value == valrealarr[i]) {
                                o.style = "color: blue;";
                                e.param.arr.push(o.text);
                                e.param.valarr.push(o.value);
                            }
                        });
                    }
                    this.options[e.length - 1].text = e.param.arr.toString();
                    this.options[e.length - 1].value = e.param.valarr.toString();
                    this.options[e.length - 1].selected = true;
                } else {
                    this.options[0].selected = true;
                }
            },
            configurable: true
        });
        e.val = choosevalue;
        if(e.hasAttribute("tip") && !e.tiped) {
            e.tiped = true;
            e.insertAdjacentHTML('afterend', '<i style="color: red;font-size: 12px">*可多选</i>');
        }
    }

    function selchange() {
        var text = this.options[this.selectedIndex].text;
        var value = this.options[this.selectedIndex].value;
        this.options[this.selectedIndex].style = "color: blue;";
        var ind = this.param.arr.indexOf(text);
        if(ind > -1) {
            this.param.arr.splice(ind, 1);
            this.param.valarr.splice(ind, 1);
            this.param.opts.filter(function(o) {
                if(o.value == value) {
                    o.style = "";
                }
            });
        } else {
            this.param.arr.push(text);
            this.param.valarr.push(value);
        }
        this.options[this.length - 1].text = this.param.arr.toString();
        this.options[this.length - 1].value = this.param.valarr.toString();
        if(this.param.arr.length > 0) {
            this.options[this.length - 1].selected = true;
        } else {
            this.options[0].selected = true;
        }
    }
})();