碼上快樂

相關內容    簡體    繁體

bootstrap-select內容太長了下拉框特別長解決

本文轉載自   查看原文   2021-10-18 13:56   142    html/css/js

css

js

 <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/i18n/defaults-zh_CN.min.js"></script>

當前版本用的是

bootstrap3.4.1
bootstrap-select 1.13.18

在bootstrap-select.min.css下加入如下css即可

        .bootstrap-select .dropdown-menu {
            width: 100%;
        }

        .bootstrap-select .dropdown-menu li a span {
            white-space: normal;;
        }

效果

image

注意

原本選項比較少時高度會自動適應
image
改在后默認就會多出很多空白空間
image

bootstrap-select v1.14.0+

從這個版本開始有個最大的亮點就是
此版本的亮點是支持使用 Ajax/JSON 作為數據源。這包括一個新的source選項，它支持3個屬性：data，load，和search。所有 3 種都支持將選項數組傳遞給回調參數的函數。或者，可以設置一個數組（可能對 更有用data）。如果source.load設置了，它會在到達下拉菜單底部時調用。如果source.search設置，bootstrap-select 的內部搜索功能將被繞過，允許您自己執行搜索。如果執行搜索並source.search設置，則在到達下拉菜單底部時將再次調用。

示例

$('#test2').selectpicker({
    source: {
        data: function (callback) {
            var array = [
                {
                    text: 'Tent',
                    icon: 'fa-camera'
                },
                {
                    text: 'Flashlight',
                    selected: true
                },
                {
                    text: 'Disabled Option',
                    disabled: true
                },
                {
                    value: 'divider',
                    divider: true
                },
                {
                    text: 'Toilet Paper'
                }
            ];

            callback(array);
        },
        load: function (callback, page) {
            $.ajax('/api/load-more', { data: { page } })
                .then((response) => callback(response.data))
        },
        search: function (callback, page, searchTerm) {
            $.ajax('/api/search', { data: { page, search: searchTerm } })
                .then((response) => callback(response.data))
        }
    }
});

bootstrap4

僅適用於 bootstrap-select v1.13.0+

bootstrap5

在bootstrap5中已經沒有上述問題

測試代碼

<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必須的 meta 標簽 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap5+jquery.validate-表單驗證插件</title>


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

    
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/i18n/defaults-zh_CN.min.js"></script>


    <style>
        .bootstrap-select .dropdown-menu {
            width: 100%;
        }

        .bootstrap-select .dropdown-menu li a span {
            white-space: normal;
        }
    </style>


</head>
<body>

<div class="container">

    <div class="row">
            <div class="col">
                <select class="selectpicker form-control">
                    <option value="1">額外企鵝去</option>
                    <option>惡趣味請問</option>
                    <option>而我卻委屈</option>
                </select>
            </div>
            <div class="col">
                <select class="selectpicker form-control" data-live-search="true" title="分類專欄">
                    <option value="1">卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽</option>
                    <option>范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                </select>
            </div>
    </div>





</div>

<script>

</script>


</body>
</html>

預留問題

就是如果選項太長了，開啟多選的時候最好把選中的內容保留指定字數，然后用引號替代剩下內容


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 bootstrap-select 多選下拉框使用教程 bootstrap-select 相關插件使用，下拉框可以選擇多個 bootstrap-select 的多選+模糊查詢下拉框詳解（官方示例文檔解讀） bootstrap-select and selectpicker 修改下拉框的寬度或者下方留白 layui的select下拉框太長被遮擋了的解決辦法 bootstrap select下拉框動態數據 select框多選（利用Bootstrap-select） bootstrap select下拉框模糊搜索和動態綁定數據解決方法 input輸入框和select下拉框內容清除 js如何獲取select下拉框的value以及文本內容
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM