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');

  • 相关阅读:
    core dump相关
    编译与链接的问题
    shell和awk配合使用
    cybergarage-upnp
    miniupnpc
    openssl
    在 linux 下使用 CMake 构建应用程序
    Ubuntu下的多线程下载工具:MultiGet;并与 Firefox 建立关联 uget
    嵌入式web服务器-thttpd
    Android_Layout_xml布局
  • 原文地址:https://www.cnblogs.com/Hijacku/p/11949715.html
Copyright © 2011-2022 走看看