• Bootstrap--multiselect


     前台用ajax获取后台的值,显示到<select id="slcPriceNo">控件中,再给<select>控件加上.multiselect()属性,如果数据源不是唯一,

    则每次要重新加载<option>中的内容,要给加上rebuild,,$("#slcPriceNo").multiselect('rebuild');

     首先:

    在<head>中引入插件 <link href="../assets/global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css" rel="stylesheet" />

    前端控件:如果是服务器控件<asp:DropDownList ID="ddlCommonFCName" runat="server" multiple="multiple" ></asp:DropDownList>则在后台给控件赋值

                  如果是前端控件<select id="slcPriceNo"></select>则在前端用ajax获取数据源给添加<option>赋值


    <script>

    $.ajax({
    url: agenturl,
    type: 'POST',
    data: {
    'act': 'getPriceNobyFcid',
    'fcid': fcid
    },
    dataType: 'json',
    async: false,
    success: function (msg) {

    //给前端<select>赋值
    $("#slcPriceNo").empty();
    $("#slcPriceNo").append("<option value='0'>请选择</option>");
    var data = msg.data;
    for (var i = 0; i < data.length; i++) {
    $("#slcPriceNo").append("<option value='" + data[i].Id + "'>" + data[i].PricingNo + "_" + data[i].FCName + "</option>");
    }

    //初始化multiselect控件

    $("#slcPriceNo").multiselect({
    buttonWidth: '100%',
    enableFiltering: true,
    maxHeight: 200,
    onChange: function (option, checked, select) {

    var priceId = $(option).val();
    var priceNo = $("#slcPriceNo").find("option:selected").text();
    $("#hipriceid").val(priceId);
    $("#spPriceView").html("<a href="../Cus/Pricing.aspx?fa=10&priceid=" + priceId + "" target="_blank">" + priceNo + "</a>");

    }

    }).multiselect('rebuild'); //若数据源要变换,则加上rebuild
    }, error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(XMLHttpRequest.responseText);
    }
    });

    如果想此控件多选,则要给<select>加上multiple='multiple'的属性

    得到多选的值,onchange:中加

    onChange: function (option, checked, select) {

    var selected = [];
    $("#ddlCommonFCName").each(function () {
    selected.push($(this).val());
    });
    $("#hiCommonFcanme").val(selected);

    }

    不在onchange中的

    var contracts=[];
    $("#slcContracts :selected").each(function(i,selected){
    contracts.push($(selected).val());
    });

    给多选下拉框赋值:

    var groupNameList = $("#hiCommonFcanme").val().split(',');
    for (var j = 0; j < groupNameList.length; j++) {
    // alert(groupNameList[j]);
    // 设置选中项
    $("#ddlCommonFCName option[value='" + groupNameList[j] + "'] ").attr("selected", true);
    }

     </script>

  • 相关阅读:
    Vue 创建项目
    Vue组件之间的传参
    Vue自定义组件
    Python开发之路
    爬虫
    手撸系列
    Django从入门到不会放弃
    前端
    day29 TCP的三次握手 TCP的四次挥手 基于TCP的socket
    day28 客户端服务端架构介绍
  • 原文地址:https://www.cnblogs.com/liuruiyun/p/6548422.html
Copyright © 2020-2023  润新知