bootstrape select使用小结

这里写图片描述


看看上面的效果是bootstrape使用的效果。虽然不是很好看,但是符合bootstrape的风格。来看看普通的select的样式


这里写图片描述

bootstrape下的select和普通select在bootstrape风格对比

这里写图片描述


这里写图片描述

引入

  • 首先我们肯定得引入jQuery和bootstrape的相关js和css,在此基础上我们引入两个东西
bootstrap-select.min.css
bootstrap-select.min.js
components-bootstrap-select.min.js

页面书写

这里写图片描述

  • 其中class属性必须包含bs-select ,且select属性中含有一下属性
data-live-search(必须)
data-size="6"(可选)
id(必须)
  • data-live-search 是用于搜索的,本章搜索没实现,以后再详细设计,但是这个属性必须有。源码里根据他选择搜索的。

  • data-size 是设置数字,意思就是下拉框内容超过几条是开始出现滚动条。

  • id用于识别这个下拉框的

Ajax请求加载select数据

  • 项目中的select多数情况下都是动态数据加载的,那么下一步开始讨论动态数据的加载问题。首先肯定是发送请求。然后在ajax请求成功后的回调地方处理我们的动态数据加载问题。
//调用公共插值方法
createSelectDate(siteDate,"site_id");

createSelectDate

  • 这个方法我们需要传入两个参数,第一个是我们需要加载的数据,第二个使我们的数据加载在select的id

  • 在来看看经过处理后我们的select

这里写图片描述

  • 仔细观察发现ul 是页面显示的数据,select是我们真正的数据,所以我们只需要向这两个地方填充数据就行了。

这里写图片描述

这里写图片描述

向select加入数据很简单,通过ID加入,
这里写图片描述

  • 关键是如何获取新的select即ul,经过实践通过以下方法就行。
var $selectUl = $($($("button[data-id='"+select_id+"']").parent().children().get(1)).children().get(1));
  • 然后向新的对象添加内容
$newSelect.append("<li data-original-index="+(index+1)+" class><a tabindex='0' class style data-tokens='null' role='option' aria-disabled='false' aria-selected='false'><span class='text'>"+value.site_name+"</span><span class='fa fa-check check-mark'></span></a></li>");

清空select选中值

  • 用了这个之后我们会遇到问题,我们无法清空新select的内容,这就很尴尬。研究半天决定强行删除
$("button[role='button'][data-id='"+select_id+"']").attr("title","请选择...");//selected active
    $("button[role='button'][data-id='"+select_id+"'] span:first").text("请选择...");

最后我们只需要调用相应的方法就行了。

转载于:https://www.cnblogs.com/zhangxinhua/p/8299226.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Select2是一个基于jQuery的自定义下拉选择插件,可以让用户在一个优雅的界面中选择数据。 树形下拉是Bootstrap Select2的一个特殊功能,它允许我们将数据以树形结构展示在下拉框中,方便用户快速选择和搜索。 使用Bootstrap Select2树形下拉,首先需要引入Select2的库文件和相关样式。然后在HTML中创建一个下拉菜单的元素,并为其添加一个自定义的class。接下来,需要通过JavaScript来配置Select2插件。 配置Select2的时候,我们需要同时传入数据源以及一些额外的配置选项。对于树形下拉的数据源,我们可以使用一个以JSON对象的形式表示的树状结构。 例如,下面是一个简单的JSON对象,表示一个带有"节点1"和"节点2"的树形结构: { "id": 1, "text": "节点1", "children": [ { "id": 2, "text": "节点2" } ] } 在配置Select2的时候,我们可以用ajax方法获取这个JSON数据,并将其传入"data"选项中。 除了数据源外,我们还可以通过配置选项调整下拉框的外观和功能。例如,可以启用搜索功能,使用户能够在下拉框中快速查找节点。 最后,我们需要通过JavaScript来初始化Select2插件并将其应用到我们创建的下拉菜单元素上。 在使用过程中,用户可以通过点击下拉框,展开或折叠树形结构。他们可以通过输入关键字来搜索节点,并选择他们想要的节点。 总结起来,Bootstrap Select2树形下拉是一个强大的工具,可以方便地在界面上展示和搜索树状数据。这个功能可以通过合适的JSON数据源和一些配置选项来实现。同时,用户可以通过点击和搜索来选择他们想要的节点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值