如何利用Bootstrap样式生成可搜索下拉框

2025-04-29 00:10:28
推荐回答(1个)
回答1:

第一步,打开HBuilder开发工具,将select2相关的css和js文件拷贝到新建的web项目的相应目录里(css和js文件夹),创建静态页面index.html,如下图所示:

第二步,在index.html页面中引入select2相关的css和js文件,并将jquery核心js引入,如下图所示:

第三步,在body标签内部插入一个div标签,然后在div标签内插入一个select标签并添加多个option,如下图所示:

第四步,在script标签内初始化调用select2()方法,直接利用select下拉框的id进行初始化,如下图所示:

第五步,直接选择浏览器进行预览,可以选择下拉框中的选项,如下图所示:

第六步,修改下拉框样式,输入选项中每个字符,可以搜索出包含这个字符的所有选项,如下图所示: