bootstrap-multiselect 显示全部选择的值 默认不选择第一项 动态重建

本文介绍如何解决Bootstrap Multiselect插件在显示选中项时的问题,通过修改源码使得能够正确显示所有已选项,并调整默认选项的设定。

在bootstrap-multiselect 选择的时候,选择为4个的时候 会显示 4 selectd,选择全部的时候 会显示 all  selectd。

现在的要求是全部显示出来。

    通过调试工具发现 title 和 text 内容是有区别的,title的值是我们需要的。

    在 bootstrap-multiselect.js 中搜索   multiselect-selected-text(class)

     发现在 updateButtonText: function() {} 方法 中 有设置title和text 内容,将 设置text的内容 修改为设置title的值。

原代码:

updateButtonText: function() {
            var options = this.getSelected();

            // First update the displayed button text.
            if (this.options.enableHTML) {
                $('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select));
            }
            else {
                $('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select));
            }

            // Now update the title attribute of the button.
            $('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));

        },

修改为


    updateButtonText: function() {
            var options = this.getSelected();

            // First update the displayed button text.
            if (this.options.enableHTML) {
                $('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonTitle(options, this.$select));
            }
            else {
                $('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonTitle(options, this.$select));
            }

            // Now update the title attribute of the button.
            $('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
            
        },


还有默认选择第一项的问题

设置
       var x = document.getElementById("xxxxx");    
          x.selectedIndex = -1;

$(".multiselect-selected-text").html("请选择");


动态重建:

var html = html+="<option value='"+obj.id+"'>"+obj.pro_Name+"</option>";

$("#xx").html(html);

 $('#xx').multiselect('rebuild');


在使用 `bootstrap-multiselect` 时,**默认长度设置**通常是指 `.multiselect` 按钮的宽度。默认情况下,`bootstrap-multiselect` 会根据原始 `<select>` 元素的宽度进行设置,但有时我们希望它能**固定宽度**、**自适应内容**或**撑满父容器**。 --- ## ✅ 一、默认行为分析 默认情况下,`bootstrap-multiselect` 会将 `<select>` 替换为一个按钮(`.multiselect`),其宽度默认继承自原 `<select>` 元素或浏览器默认样式。 如果你没有显式设置宽度,可能出现以下情况: - 按钮宽度太窄,无法显示完整选项; - 宽度与页面布局协调; - 在响应式布局中显示一致。 --- ## ✅ 二、设置 `bootstrap-multiselect` 默认长度的几种方式 ### ✅ 方法一:通过 CSS 设置固定宽度 ```html <style> .multiselect { width: 200px !important; } </style> ``` 或者: ```html <select id="mySelect" multiple style="width: 200px;"> ... </select> ``` > `!important` 是为了覆盖插件默认样式。 --- ### ✅ 方法二:使用 Bootstrap 工具类设置宽度 你可以直接在 `<select>` 上使用 Bootstrap 的宽度类: ```html <select id="mySelect" multiple class="form-control w-50"> ... </select> ``` - `w-25`: 宽度为 25% - `w-50`: 宽度为 50% - `w-75`: 宽度为 75% - `w-100`: 宽度为 100% --- ### ✅ 方法三:设置按钮宽度自适应内容 如果你希望按钮宽度**根据内容自动调整**,可以使用 `width: auto`: ```css .multiselect { width: auto !important; min-width: 150px; } ``` --- ### ✅ 方法四:撑满父容器 ```css .multiselect { width: 100% !important; } ``` 或者: ```html <div style="width: 100%;"> <select id="mySelect" multiple class="form-control"> ... </select> </div> ``` --- ## ✅ 三、完整示例代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>bootstrap-multiselect 设置默认长度</title> <!-- Bootstrap CSS --> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- bootstrap-multiselect CSS --> <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.css" rel="stylesheet"> <style> /* 设置固定宽度 */ .multiselect { width: 300px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 或者自适应内容 */ /* .multiselect { width: auto !important; min-width: 150px; } */ /* 或者撑满父容器 */ /* .multiselect { width: 100% !important; } */ </style> </head> <body class="p-3"> <h3>bootstrap-multiselect 设置默认长度</h3> <select id="fruitSelect" multiple class="form-control"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> <option value="watermelon">这是一个非常长的选项名</option> </select> <!-- jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> <!-- bootstrap-multiselect JS --> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js"></script> <script> $(document).ready(function () { $('#fruitSelect').multiselect({ nonSelectedText: '请选择水果', nSelectedText: '已选中', allSelectedText: '全部选中', selectAllText: '全选', buttonClass: 'btn btn-secondary' }); }); </script> </body> </html> ``` --- ## ✅ 四、总结对比 | 方法 | 描述 | 是否推荐 | |------|------|----------| | `width: 200px` | 设置固定宽度 | ✅ 推荐 | | `w-50`, `w-100` 等 Bootstrap 类 | 快速设置宽度 | ✅ 推荐 | | `width: auto` | 自适应内容宽度 | ✅ 推荐 | | `width: 100%` | 撑满父容器 | ✅ 推荐 | | `min-width` + `max-width` | 灵活控制宽度范围 | ✅ 高级用法 | --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值