带搜索框的select下拉框

本文介绍如何使用Select2插件为HTML select元素添加搜索功能,包括引入CSS和JS文件、设置class属性及调用JS初始化代码。同时提供中文提示的修改方法,直接编辑JS源码实现本地化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

利用select2制作带有搜索功能的select下拉框

1.引入线上css和js

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

2.在select标签内加入class属性js-example-basic-single

<select class="js-example-basic-single" name="state">

<option value="AL">Alabama</option>

...

<option value="WY">Wyoming</option> </select>

3.调用js

$(document).ready(function() {

    $('.js-example-basic-single').select2();

});

关于中文提示

看到有人引入官方文档提供的zh-cn属性和JS来处理中文,在这采用另一种简单粗暴的解决方案:直接找到JS源码进行修改即可。

——在源文件中找到 select2.min.js文件,ctrl+F 搜索 “Searching...”,将找到的代码改为“查找中...”,再继续搜索 “no results found”,同理修改为“无数据”。

select2.min.css下载:https://blog-static.cnblogs.com/files/yang-xiansen/select2.min.css

select2.min.js下载:https://blog-static.cnblogs.com/files/yang-xiansen/select2.min.js

转载于:https://www.cnblogs.com/yang-xiansen/p/10298410.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值