1. 程式人生 > >selectpicker下拉多選框ajax非同步或者提前賦值=》預設值

selectpicker下拉多選框ajax非同步或者提前賦值=》預設值

Bootstrap select多選下拉框賦值

success: function (data) {
    var oldnumber = new Array();
    $.each(data, function (i) {
            oldnumber.push(data[i].id);
    });
    $('#editcolor .selectpicker').selectpicker('val', oldnumber);//預設選中
    $('#editcolor .selectpicker').selectpicker('refresh');
}

上面是ajax獲取預設值,記得selectpicker是通過id來操作的,

<div class="col-md-8" id="editcolor">
    <select placeholder="請選擇顏色" id="selectpickerallstr"
            name="selectpickerallstr"
            class="selectpicker show-tick form-control"
            data-style="btn-success" multiple data-live-search="true">
    </select>
</div>

你們可以參考我前面的一篇文章,我再貼一遍獲取程式碼

//select顏色
var loadTemplateColor = function () {
    $.ajax({
        type: 'GET',
        url: root + '/mycolor',
        success: function (data) {
            var data = eval(data);
            $.each(data, function (i) {
                    $("<option value='" + data[i].id + "'>" + data[i].text + "</option>")
                                                                    .appendTo(".selectpicker");
            });
            $('.selectpicker').selectpicker({
          //我是對所有的selectpicker操作一次性賦值,如果你想單獨賦值,好ok,那麼就這樣賦值:
          //appendTo("#editcolor .selectpicker"),就這樣,在你select元素上面罩上一個div,
         //用div的id就可以標記你要操作的selectpicker,也就是你想操作的select元素標籤了
             style: 'btn-info',
                size: 8
            })
        }
    });
}

一次搞定一個值的賦值:

$('#editcolor .selectpicker').selectpicker('val', 1);//預設選中
$('#editcolor .selectpicker').selectpicker('refresh');

一次搞定很多值的賦值:

success: function (data) {
    var oldnumber = new Array();
    $.each(data, function (i) {
            oldnumber.push(data[i].id);
    });
    $('#editcolor .selectpicker').selectpicker('val', oldnumber);//預設選中
    $('#editcolor .selectpicker').selectpicker('refresh');
}

動態賦值

<select id="filetype" name="filetype" class="selectpicker show-tick dropup" data-live-search="true" onchange="filetypeChange();"></select>

初始化呼叫 getdata4select("filetype","FILE_TYPE");

/**
* 根據字典型別查詢字典資料,供bootstrap select使用
* @param id
* @param dicttype
*/
function getdata4select(id,dicttype){
var url ='/yh/com/dominsoft/act/YHTypeHandleAct/getItemType.act?type='+dicttype;
var json = getJsonRs(url);
if(json.rtState == "0"){
var rtData = json.rtData;
var typeData = rtData.typeData;
jQuery('#'+id).append("<option value='' >請選擇</option>");
for (var i = 0; i < typeData.length; i++) {
jQuery('#'+id).append("<option value=" + typeData[i].typeId + " >" + typeData[i].typeDesc + "</option>");
}
}
jQuery('#'+id).selectpicker();
}

相關推薦

selectpickerajax非同步或者提前=》預設

Bootstrap select多選下拉框賦值 success: function (data) { var oldnumber = new Array(); $.each(data, function (i) { oldnumber.push(data[i].

angular2.x 選擇組件

下拉 round ice osi 界面 poi top iou open angular2.x - 5.x 的下拉多選框選擇組件 ng2 -- ng5。最近在學angular4,經常在交流群看見很多人問 下拉多選怎麽做。。。 今天就隨便寫的個。 組件源碼 百度雲 鏈接:

自己用ul模擬實現

ogg point shee index ati ref -m order nowrap 模擬實現下拉多選框 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta char

select標籤(

預設顯示的文字變為不可選 <select> <option value="" disabled selected hidden>choose</option> <option value="0">0</option&g

學習筆記-extjs3.4

      原先做的時候,在網上找了很多例子,最後定下了LovCombo這個擴充套件例子,比較好看,而且穩定性強一些,暫時還沒發現什麼bug,先貼張圖看看效果。       作為多選的時候,會是一種很好的選擇,下面是主要程式碼。 <link rel="styles

bootstrap(bootstrap-select)

前端用vue+bootstrap,需求是做可多選下拉框。 首先附上該外掛的下載地址。 要使用該外掛在引入jquery.js和bootstrap.js後還需要引入以上地址資源中的 bootstrap-select.min.css 和 bootstrap-select.m

bootstrap-select

更多參考 引入樣式 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> &l

外掛介紹:Bootstrap 外掛Bootstrap Multiselect

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <link rel="stylesheet" href="css/bootstrap-multi

使用bootstrap 的選單實現select的

CSS程式碼:/*多選下拉框樣式(根據自己的樣式調整)*/ .dropdown_item{width: 100%} .dropdown_item>li:HOVER{background-color

FineReport 引數面板之下

                     行政人事部的小張美女說:HI,小gong年度問卷調查你幫我匯出下資料唄,快點我馬上要用。我心想:我怎麼把這事忘了。回答好唄。之前都是用webfrom,winform,CR去做的,今個咋換個方式唄:最近流行finereport。下載安裝過程省去一百字。。。123一、新建

dorado7.x 實現以及位置浮動不固定在下的問題及解決辦法

在所需的property,設定trigger 下一步: 設定onExcute: var ChannelInputs=view.get("#ChannelInputs"); view.get("#dataSetChannel").flushAsync(); ChannelInp

Bootstrap-select獲取選中的資料

剛好用到bootstrap-select外掛,遇到問題: 1.如何把選中的人員[名字+id]獲取到? 2.後臺要求的是json格式的資料,如何處理? 3.前端用el表示式在jsp中綁定了<select><option>,把id綁到哪個位置方便獲取?(

Jquery.sumoselect外掛實現

1、官方網站: https://hemantnegi.github.io/jquery.sumoselect/  說明介紹網址 https://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html   dem

checkbox

本文原創,轉載請註明出處 CSS程式碼 JS程式碼 全部程式碼 今天根據要求讓實現下拉列表加入多選按鈕,之前寫過百度搜索效果,但是感覺不太適用。然後大概想了一下就動手開始試著去寫,實現效果如下圖: (注:選中下拉多選框

jQuery操作列表以及單

width http 數組 ini init 獲取多選框的值 asc cli 添加 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

jqgrid 表格中篩選條件的,樹形 ;文本清除插件;高級查詢條件動態篩選插件

this break eset real 分割線 EDA color ctx 篩選條件 /** * @@desc 文本框清除按鈕,如果isAutoWrap為false當前文本框父級必須是relative定位,boostrap參考input-group

實現選單效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <li>工作意願地: <%-- <c:forEach items="${list}" var="lis

easyui combobox實現以及全、全不的實現

實現效果如下圖: 當勾選全選的時候,可以選中下列所有的選項,當取消勾選時可取消所有勾選。 廢話不多說 貼程式碼吧: 前端程式碼: //這裡的id是上面的combobox的id,因為我要在點選一個按鈕的之後再動態的加載出來,所以我把它單獨的抽取出來了。如果需要一開

vue.js 新增動態的,單

1.下拉框 <FormItem label="關聯題目型別" prop="questionTypeId"> <Select v-model="addValidate.questionTypeId" placeholder="請選擇題目型

列表的實現

日常開發中,可能會遇到要做帶多選框的下拉,如下圖 是不是你想要的呢,下面來談談實現,我這個用的是一個bootstrap multiselect 外掛,至於下載啥的網上到處都有 <select id="area" class="form-control text-i