Nodejs配合bootstrap-select下拉列表

Nodejs配合bootstrap-select下拉列表

alt Nodejs配合bootstrap-select下拉列表

前言

网页里的下位列表，英文名drop down list，几乎所有网站都会用到这个组件。bootstrap已经设计了一个下拉列表的基本样式，在表单中展示已经够用了，但如果我们希望有更多一些的功能，不妨学一下Bootstrap-select，github项目地址 ，官方demo。

目录

功能需求列表 代码实现 使用bootstrap-select实现需求

下拉列表如下的显示要求：

默认显示 “请选择” 默认值是空 单选下拉列表 下拉后选中的行，结尾以“√”标识 下拉列表长度为5行，多于5行的用滚动条显示 通过nodejs传参数设置默认值

请查看博客文章
http://blog.fens.me/nodejs-bootstrap-select/


6 回复

Nodejs配合bootstrap-select下拉列表

前言

下拉列表（英文名 drop down list）几乎是所有网站必备的组件之一。Bootstrap 提供了基本的下拉列表样式，但在某些情况下，我们可能需要更高级的功能。这时，Bootstrap-select 库可以提供更多的定制选项。

Bootstrap-select 是一个基于 Bootstrap 的 jQuery 插件，它增强了原生的下拉列表，提供了诸如搜索、多选、分组等增强功能。本文将介绍如何在 Node.js 后端配合 Bootstrap-select 实现上述功能需求。

目录

  • 功能需求列表
  • 代码实现
  • 使用 Bootstrap-select 实现需求

功能需求列表

  1. 默认显示 “请选择”
  2. 默认值为空
  3. 单选下拉列表
  4. 下拉后选中的行，结尾以“√”标识
  5. 下拉列表长度为5行，多于5行的用滚动条显示
  6. 通过 Node.js 传参数设置默认值

代码实现

首先，我们需要安装 Bootstrap 和 Bootstrap-select。可以通过 npm 安装这些依赖：

npm install bootstrap bootstrap-select --save

接下来，在你的 Node.js 应用中引入 Bootstrap 和 Bootstrap-select 的 CSS 和 JS 文件。假设你使用的是 Express 框架：

// app.js
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

创建一个简单的 HTML 文件 index.html，并添加 Bootstrap-select 的相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Node.js + Bootstrap-select</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/bootstrap-select.min.css">
</head>
<body>
  <div class="container mt-5">
    <select id="mySelect" class="selectpicker" data-live-search="true">
      <option value="">请选择</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
      <option value="4">选项4</option>
      <option value="5">选项5</option>
      <option value="6">选项6</option>
    </select>
  </div>

  <script src="/js/jquery.min.js"></script>
  <script src="/js/bootstrap.bundle.min.js"></script>
  <script src="/js/bootstrap-select.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#mySelect').selectpicker({
        maxOptions: 5,
        liveSearch: true
      });

      // 设置默认值
      if ('defaultValue' in req.query) {
        $('#mySelect').val(req.query.defaultValue).selectpicker('refresh');
      }
    });
  </script>
</body>
</html>

使用 Bootstrap-select 实现需求

  1. 默认显示 “请选择”：通过 <option value="">请选择</option> 实现。
  2. 默认值为空：默认值为空，通过 value="" 实现。
  3. 单选下拉列表：Bootstrap-select 默认为单选。
  4. 选中的行以“√”标识：可以在 selectpicker 初始化时自定义渲染函数。
  5. 下拉列表长度为5行：通过 maxOptions: 5 实现。
  6. 通过 Node.js 传参数设置默认值：在 URL 中传递参数，如 /?defaultValue=2。

以上就是如何在 Node.js 中配合 Bootstrap-select 实现上述功能需求。


牛人啊，有时间写博文

最近刚好学学nodejs，发现挺好用的，写点文章，也为自己以后留下参考。

这个 select 非常好，正用的上，谢谢楼主

bootstrap-select http://silviomoreto.github.io/bootstrap-select/

:-)

为了满足上述的需求，我们需要结合Node.js和Bootstrap-select来创建一个具有特定功能的下拉列表。

功能需求

  • 默认显示“请选择”
  • 默认值为空
  • 单选下拉列表
  • 下拉后选中的行，结尾以“√”标识
  • 下拉列表长度为5行，超过5行时使用滚动条显示
  • 可以通过Node.js传参设置默认值

代码实现

HTML 和 Bootstrap-select 设置

首先，我们需要引入Bootstrap和Bootstrap-select的相关库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown List Example</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <!-- 引入Bootstrap-select CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
</head>
<body>
    <div class="container mt-5">
        <select id="dropdownList" class="selectpicker" title="请选择">
            <option value="option1">选项1</option>
            <option value="option2">选项2</option>
            <option value="option3">选项3</option>
            <option value="option4">选项4</option>
            <option value="option5">选项5</option>
            <option value="option6">选项6</option>
            <option value="option7">选项7</option>
        </select>
    </div>

    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <!-- 引入Popper.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <!-- 引入Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <!-- 引入Bootstrap-select JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#dropdownList').selectpicker({
                style: 'btn-default',
                size: 5,
                noneSelectedText: '请选择'
            });
        });
    </script>
</body>
</html>

Node.js 设置默认值

接下来，我们将通过Node.js来动态设置默认值。这里我们假设你已经有一个简单的Express服务器。

const express = require('express');
const app = express();
app.use(express.static('public'));

app.get('/setDefault', (req, res) => {
    const defaultValue = req.query.value || '请选择';
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Dropdown List Example</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
        </head>
        <body>
            <div class="container mt-5">
                <select id="dropdownList" class="selectpicker" title="${defaultValue}">
                    <option value="option1">选项1</option>
                    <option value="option2">选项2</option>
                    <option value="option3">选项3</option>
                    <option value="option4">选项4</option>
                    <option value="option5">选项5</option>
                    <option value="option6">选项6</option>
                    <option value="option7">选项7</option>
                </select>
            </div>
            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
            <script>
                $(document).ready(function() {
                    $('#dropdownList').selectpicker({
                        style: 'btn-default',
                        size: 5,
                        noneSelectedText: '请选择'
                    });
                });
            </script>
        </body>
        </html>
    `);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

使用说明

  1. 运行Node.js服务器。
  2. 访问 http://localhost:3000/setDefault?value=选项1 来设置默认值。

这样我们就完成了基于Node.js的Bootstrap-select下拉列表的实现。

回到顶部