• js jq --bootstrap-select


    简介:

    基于jq的 下拉框

    bootstrap-select 是基于 jQuery v1.9.1 +,Bootstrap的dropdown.js组件和Bootstrap的CSS

    Bootstrap 4仅适用于bootstrap-select v1.13.0 +

    bootstrap-select :git 地址:https://github.com/snapappointments/bootstrap-select

    用法:

    selectpicker类添加到select元素以自动初始化bootstrap-select。

    <select class="selectpicker">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Barbecue</option>
    </select>
        
    

    实例:

     <select  class=" selectpicker" data-live-search="true" id="ruleSeleted" name="ruleSeleted"   >
     </select>
    
    
    <script src="/static/plugin/jquery/jquery-1.10.2.min.js"></script>
    <script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/plugin/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="/static/plugin/jquery/template-web.js"></script>
    <script type="text/html" id="rule_temp">
        <option value=""></option>
        {{ each list item index}}
        <option value="{{item.ruleId}}" data-code="{{item.ruleId}}" data-name="{{item.ruleName}}" data-state="{{item.ruleState}}" data-type="{{item.ruleType}}">{{item.ruleName}}</option>
        {{/each}}
    </script>

     bootstrap已经对select初始化渲染后,会在ul标签中追加li标签属性。

    我再开发中 发现 动态添加的option没有显示 ,是因为此li标签中没有值。

    处理:应该在动态添加 option后,重新渲染;

    $('#ruleSeleted').selectpicker('refresh');//使用refresh方法更新UI以匹配新状态。
    $('#ruleSeleted').selectpicker('render');//render方法强制重新渲染引导程序 - 选择ui。
    $.ajax({
            "url":path + "XXXX",
            "type":"POST",
            success:function(res){
                var enentRulehtml = template('rule_temp',{
                    list:res
                })
                $('#ruleSeleted').html(enentRulehtml)
                //使用refresh方法更新UI以匹配新状态。
                $('#ruleSeleted').selectpicker('refresh');
                //render方法强制重新渲染引导程序 - 选择ui。
                $('#ruleSeleted').selectpicker('render');
           }
    })

    赋值select默认选中的值:

     $('.selectpicker').selectpicker('val', r.RULE_ID);

    添加 multiple="multiple" 设置 多选

    <select id ="weatherType" name="weatherType" class="form-control selectpicker" multiple="multiple" title="请选择">
     
    </select>

    多选框取值,多选的值会自动用逗号分隔开

    $("#weatherType").val()

    提交数据时将表单序列化:

    var formData = $("#createUserForm").serialize();

    val()只能取到一个选中的值,无法传入多选的值解决:

    $("#weatherType").change(function(){
                $("input[name=weatherType1]").val($("#weatherType").val())
        })

    多选框的赋值:

    $("#weatherType").selectpicker ("val",weatherType).trigger("change");

    更多效果 可以查看 https://www.cnblogs.com/dongh/p/9582728.html

    中文文档 :https://www.bootstrapselect.cn/options.html

  • 相关阅读:
    2020-01月-02月
    Work needing Technologies
    gcc和 gdb工具(转)
    pyenv and grunt-contrib-testem
    Statistics Books
    HTML5学习--SVG全攻略(基础篇)
    一个完整的学院网站实现过程
    JavaScript 常用单词整理
    一张图教会CSS3倒影
    Python大数据处理案例
  • 原文地址:https://www.cnblogs.com/lpp-11-15/p/13683552.html
Copyright © 2020-2023  润新知