jQuery实现下拉框多选 jquery-multiselect 的实例代码

下面是详细讲解“jQuery实现下拉框多选 jquery-multiselect 的实例代码”的完整攻略：

什么是jquery-multiselect？

jquery-multiselect 是一个基于jQuery实现的下拉框多选插件，可以让用户方便地从下拉框中选择多个选项。

如何安装jquery-multiselect？

首先，需要引入jquery和jquery-multiselect的js和css文件。可以从官网（https://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-jQuery-multiSelect/）下载。
在html页面中，创建一个select元素，并设置“multiple”属性。例如：

<select multiple id="mySelect">
  <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>
</select>

在页面加载完成后，调用jquery-multiselect插件的初始化函数，并传入以上创建的select元素的id。例如：

$(document).ready(function() {
  $('#mySelect').multiselect();
});

如何在jquery-multiselect中实现下拉框多选？

jquery-multiselect默认就支持下拉框多选，用户只需要在select元素中设置“multiple”属性即可。

如何在jquery-multiselect中获取已选中的值？

可以使用jquery-multiselect提供的选中值获取方法，例如：

var selectedValues = $('#mySelect').multiselect('getChecked').map(function(){
    return this.value;
}).get();

该代码将返回一个包含所有被选中选项值的数组。

实例1：通过jquery-multiselect实现下拉框多选

<head>
  <link rel="stylesheet" href="jquery.multiselect.css">
  <link rel="stylesheet" href="jquery.multiselect.filter.css">
</head>
<body>
  <select multiple class="multiselect" id="mySelect">
    <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>
  </select>

  <script src="jquery.min.js"></script>
  <script src="jquery.multiselect.js"></script>
  <script src="jquery.multiselect.filter.js"></script>

  <script>
    $(document).ready(function() {
      $('#mySelect').multiselect({
        enableFiltering: true,  // 开启过滤功能
        filterPlaceholder: '搜索', // 设置过滤框的提示信息
        enableCaseInsensitiveFiltering: true // 开启大小写不敏感
      });
    });
  </script>
</body>

在上述代码中，我们创建了一个带有过滤功能的jquery-multiselect，并在页面加载完成后进行了初始化。

实例2：获取jquery-multiselect中选中的值

<head>
  <link rel="stylesheet" href="jquery.multiselect.css">
  <link rel="stylesheet" href="jquery.multiselect.filter.css">
</head>
<body>
  <select multiple class="multiselect" id="mySelect">
    <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>
  </select>

  <button id="btn">获取选中值</button>

  <script src="jquery.min.js"></script>
  <script src="jquery.multiselect.js"></script>
  <script src="jquery.multiselect.filter.js"></script>

  <script>
    $(document).ready(function() {
      $('#mySelect').multiselect({
        enableFiltering: true,  // 开启过滤功能
        filterPlaceholder: '搜索', // 设置过滤框的提示信息
        enableCaseInsensitiveFiltering: true // 开启大小写不敏感
      });

      $('#btn').click(function() {
        var selectedValues = $('#mySelect').multiselect('getChecked').map(function(){
          return this.value;
        }).get();
        console.log(selectedValues);
      });
    });
  </script>
</body>

在上述代码中，我们创建了一个带有过滤功能的jquery-multiselect，并在页面加载完成后进行了初始化。同时还创建了一个按钮，当用户点击按钮时，将会获取jquery-multiselect中被选中的值并打印在控制台中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现下拉框多选 jquery-multiselect 的实例代码 - Python技术站