zoukankan      html  css  js  c++  java
  • 下拉框动态显示options遇到的问题

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

    但是碰到了两个问题:

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

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

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

      

    $("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');

  • 相关阅读:
    sublime text 内调试Javascript代码
    Sublime Text 3快捷键汇总
    call、apply、bind的异同
    jQuery.cookie的使用指南
    原来css也可以计算-calc()使用
    WebStorm 最新版本激活方式
    JS获取开始、结束时间
    sublime text3---Emmet:HTML/CSS代码快速编写神器
    ThinkPHP3上传文件中遇到的问题
    ThinkPHP3自动加载公共函数文件
  • 原文地址:https://www.cnblogs.com/Hijacku/p/11949715.html
Copyright © 2011-2022 走看看