百度后发现,目前资源比较多的就是layui和bootstrap这两种框架了,我是用的bootstrap-select,不知道为啥使用layui的formselect,引入css和js文件后,在select标签中输入xm-select,网页直接select框都不见了,倒腾了半天,选择了bootstrap-select,也挺好用的。

但是碰到了两个问题:

Q1:下拉框会多出一些重复选项

Q2:控制台下的select标签中都填充了options标签,但是网页下拉框中无选项

A1【直接将这段代码复制到你的代码中(代码来自csdn:id:BeClassFive)】:【

  

$("select").each(function(i,n){ //去重
var options = "";
$(n).find("option").each(function(j,m){
if(options.indexOf($(m)[0].outerHTML) == -1)
{
options += $(m)[0].outerHTML;
}
});
$(n).html(options);
});

A2:网上查阅得知【https://www.cnblogs.com/staticking/p/10504584.html】,bootstrap-select在对select标签进行初始化的时候,会生成ul标签,而select下拉框的选项会被当作li标签插入到ul中,当你的选项都被插入到ul中时,网页的下拉框才会显示出选项,而我做的代码中select的options是从数据库带出来的,需要经过上述步骤,【注意,直接在select标签中添加的options是会直接在网页显示的】,动态添加options就会出现我这样的问题。

解决方案:动态追加options重新对select框进行渲染:代码如下:【

         //使用refresh方法更新UI以匹配新状态。
        $('#selector').selectpicker('refresh');
        //render方法强制重新渲染引导程序 - 选择ui。
        $('#selector').selectpicker('render');

下拉框动态显示options遇到的问题的更多相关文章

  1. 第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件

    jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...

  2. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  3. JAVAScript控制多个下拉框

    方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值.实例演示如下: 这个东西我是在百度上查的,我为了方 ...

  4. Javascript获取select下拉框选中的的值

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

  5. Easyui-combobox-checkbox-带复选框的下拉框

    $.post("getSubInsuranceTypeList.do",{parent_id:node.id},function(result){                  ...

  6. 获取下拉框的文本值和value值

    http://www.cnblogs.com/djgs/p/3691979.html?utm_source=tuicool&utm_medium=referral 现在有一个Id为AreaId ...

  7. 自制jquery可编辑的下拉框

    昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox ...

  8. selenium处理select标签的下拉框

    有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select  ...

  9. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

随机推荐

  1. 05-树8 File Transfer

    并查集 简单并查集:输入N,代表有编号为1.2.3……N电脑.下标从1开始.初始化为-1.合并后根为负数,负数代表根,其绝对值代表个数. We have a network of computers ...

  2. Linux 软中断

    本文转载自: http://blog.chinaunix.net/uid-9620812-id-3833377.html,如有需要,请移步访问. Technorati 标签: Linux 软中断 -- ...

  3. ios开发之数据存取1-SQLite

    iOS开发中常用的数据存取方式有: XML属性列表-PList NSKeyedArchiver 归档 Preference-偏好设置 SQLite3 Core Data-以面向对象的方式操作数据库SQ ...

  4. 桥接模式(Bridge Pattern)

    1,定义           桥接模式(Bridge Pattern),也称为桥梁模式,其用意是将抽象化与实现化脱耦,使得两者可以独立的变化,它可以使软件系统沿着多个方向进行变化,而又不引入额外的复杂 ...

  5. for循环++i效率

    偶然用到for循环 注意查看了一下 ++i的速度更快 这是PHP语言独有的 其他语言不会有这种情况

  6. HDU 4946 Area of Mushroom 凸包 第八次多校

    题目链接:hdu 4946 题意:一大神有N个学生,各个都是小神,大神有个二次元空间,每一个小神都有一个初始坐标,如今大神把这些空间分给徒弟们,规则是假设这个地方有一个人比谁都先到这,那么这个地方就是 ...

  7. elasticsearch 5.0以上不支持consistency 和 quorum

    从ES2.2升级到5.2后,原先执行put 带 consistency=all / quorum 参数的,都报错了,提示语法错误.. 百度查了一通,都没发现相关问题.无奈,还是查官方文档.. 发现这是 ...

  8. 在Ubuntu主机下实现与Windows虚拟机共享文件夹

    一.概述 由于要实现Ubuntu主机中的一些文件与Windows虚拟机共享,因此要创建一个共享文件夹映射到虚拟机中. 网上许多都是Windows主机+Linux虚拟机的配置,在此分享主机是Linux的 ...

  9. cookie和session的区别和用法

    1. 由于HTTP协议是无状态的协议,所以服务端需要记录用户的状态时,就需要用某种机制来识具体的用户,这个机制就是Session.典型的场景比如购物车,当你点击下单按钮时,由于HTTP协议无状态,所以 ...

  10. php程序开发之实现网页跳转

    php程序开发之实现网页跳转的三种方式 2017年04月16日 20:44:14 阅读数:3352 PHP目前是用来开发WEB项目的首选语言.Web项目中,从一个网页跳转到另一个网页是最常用的技术之一 ...