简单几行代码让select下拉列表支持搜索功能

zhuanghw全栈工程师

于 2024-02-26 16:42:05 发布

阅读量424

点赞数 11

文章标签： html

本文链接：https://blog.csdn.net/zhw0596/article/details/136303104

版权

业务上需要修改jsp代码, 让select支持搜索

原本效果

修改后

代码如下,使用select2快速适用，有几个select 就加几个

class="singleSelect"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
  <title>select2测试</title>
</head>
<body>
<div>
  <select class="singleSelect" style="width: 200px">
    <option value="">--请选择--</option>
    <option value="">江南</option>
    <option value="">杭州</option>
    <option value="">上海</option>
    <option value="">北京</option>
    <option value="">深圳</option>
    <option value="">浙江</option>
 
  </select>
</div>
 
 
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
 
<script type="text/javascript">
  $(document).ready(function () {//加载页面时执行select2
    $('.singleSelect').select2({
 language: {
      noResults: function(params) {
          return "未找到该数据";
      }
 }
 });
  });
</script>
</body>
</html>