zoukankan      html  css  js  c++  java
  • 使用JQ、BootStrap时,踩过的坑

    (此文用于记录编程过程过程中,遇到的那些令人头皮发麻的坑,以及它们的解决方法)

    一、使用bootstrap-select、JQ

      日前,要做一个需求,有一个输入框,可以multiple输入,输入的东西还要到数据库判断,其是否存在?后台还要根据这些信息一条一条查找别的表数据,我想这个逻辑实现起来挺麻烦的,干脆在页面就限定用户的选择,就是页面加载的时候就从数据看获取信息,那些,用户就不会输入一些搞怪信息,因此我就找到bootstrap的多选下拉框样式去设计页面,使用JQ、JS来动态追加下拉框可选组件,常规操作如下:

    success: function (data) {
                        var select = $(".selectpicker");
                        var opts = "";
                        var jsonObject = $.parseJSON(data.d);                    
    
                        $.each(jsonObject, function (key, value) {
                            if(value!=""){
                                opts += "<option style='height:26px' value='" + jsonObject[key] + "'>" + jsonObject[key] + "<option/>";
                            }                        
                        });
                        
                        select.append(opts);
    
                        $('#ResGpSelect').selectpicker('refresh');
                        $('#ResGpSelect').selectpicker('render');
                    }, 

    但这时坑就来了,页面显示莫名其妙的,每一个<option/>下面都会紧接着一个没有value值的<option/>,贴一下页面效果:

    页面效果显示每一条数据都会紧接着一条空白数据,再贴一下html调试代码:

    当bootstrap样式转化为html样式时,会莫名其妙多出了上图红色框的内容<span/>标签的text值是"",上网找了很久都没有找到解决办法,有一种比较变态的手段是使用标签的父、子标签一个一个寻找,然后把它去掉,反正博主就不会这么高端的操作。

    下面有一种可以很好的解决方法,代码先上为敬:

    success: function (data) {
                 var select = $(".selectpicker");
                 var jsonObject = $.parseJSON(data.d);                    
    
                 $.each(jsonObject, function (key, value) {                        
                        var option = $('<option></option>');
                        option.attr('value', jsonObject[key]);
                        option.text(jsonObject[key]);
                        select.append(option);
                    });
                    $('#ResGpSelect').selectpicker('refresh');
                    $('#ResGpSelect').selectpicker('render');
                }, 

    将原先的字符串"<option/>"换成了$('<option/>'),这样就解决了问题。

     这个时候,从html代码可以看出,每个<span/>标签的text值都不是""。

  • 相关阅读:
    手机通讯录实现
    leetcode
    android 上手维修设备和推断启动服务
    MVC Code First (代码优先)
    10000阶乘
    telnet发电子邮件
    nodejs显现events.js:72抛出错误
    指针
    脑洞门大开思维工具:六顶思考帽
    C#实现CAD数据转shape或mdb
  • 原文地址:https://www.cnblogs.com/SysoCjs/p/9856147.html
Copyright © 2011-2022 走看看