【Web】select2數據加載後再設置對應值問題

官網：https://select2.org/programmatic-control/add-select-clear-items

問題：

思路：通常會遇到這樣一個問題：一個select控件，我們通過ajax方式獲取到服務端的數據，並對select控件進行初始化，然後從一個接口中獲取到另一個模型裏的數據，通過判斷這個數據來，設置select中對應的option。

前端使用了jquery+ select2+ jsp來實現頁面：

  let macSelect = $("#machineList").select2({
        placeholder: 'Select Mac Client',
        "theme": "bootstrap",
        "minimumResultsForSearch" :"Infinity",
        ajax: {
            "url": JURL + "/allMa",
            "type": "get",
            'processResults': function(data){
                if(data.code === 200){
                    let mac = data.data.machineList;
                    let mLen = mac.length;
                    let res = [];
                    for(let i = mLen-1 ; i >= 0 ;i--){
                        let a = {
                            id: mac[i].id,
                            text: mac[i].ip
                        };
                        if(mac[i].status !== 1){
                            a.disabled = true
                        }
                        res.push(a)
                    }
                    return {results: res};
                }
            }
        }
    });
    
    //********設置選中值*********
    $("#machineList").val(oCase.clientip).trigger("change");

問題現象是：按照思路里的方案去組織代碼，發現頁面刷新的時候，ajax異步加載，然後再去val()設置，並不能成功了設置數據，通過實驗發現，這應該是一個機制，具體什麼機制，待深挖源碼。

解決：

這裏說下，對於插件select2來說，他的數據格式有兩種：一是原生option數據，而是定義的list數據；而list數據來源兩個：一個是本地定義var，一個是ajax去服務器拉取；所遇問題是因爲使用服務器拉取的方式，並去設置值，這個過程異步操作，會有時間上的衝突，如果我是去編輯頁面，select標籤的數據和設置操作是同時的就會出現問題，所以我使用另一個方案去穩定各個數據的加載

let macSelect = $("#machineList");
    macSelect.html("");
    $.ajax({
        "url": JCsrfURL + "/allMachine",
        "type": "get",
        success: function(data){
            if(data.code === 200){
                let mac = data.data.machineList;
                let mLen = mac.length;
                macSelect.append('<option value=""></option>');
                for(let i = mLen-1 ; i >= 0 ;i--){
                    if(mac[i].status !== 1){
                        macSelect.append('<option value="'+mac[i].ip+'" disabled>'+mac[i].ip+'</option>');
                        continue
                    }
                    macSelect.append('<option value="'+mac[i].ip+'">'+mac[i].ip+'</option>');
                }
            }
            macSelect.select2({
                placeholder: 'Select Mac Client',
                "theme": "bootstrap",
                "minimumResultsForSearch" :"Infinity"})
        }});

//********設置選中值*********
setTimeout(function () {
    $("#machineList").val(oCase.clientip).trigger("change");
},500)

使用了html源碼標籤的添加方式，並對設置值做了一個延遲操作，這樣解決了，同時拉取數據和設置數據的不生效問題；

補充：（jquery操作select(取值，設置選中），針對原生select）

操作select(增加，刪除，清空)  

1. $("#select_id").change(function(){//code...}); //爲Select添加事件，當選擇其中一項時觸發
 
2. var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的
 
3. var checkValue=$("#select_id").val(); //獲取Select選擇的Value
 
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //獲取Select選擇的索引值
 
5. var maxIndex=$("#select_id option:last").attr("index"); //獲取Select最大的索引值
 
jQuery添加/刪除Select的Option項：
 
1. $("#select_id").append("<option value='Value'>Text</option>"); //爲Select追加一個Option(下拉項)
 
2. $("#select_id").prepend("<option value='0'>請選擇</option>"); //爲Select插入一個Option(第一個位置)
 
3. $("#select_id option:last").remove(); //刪除Select中索引值最大Option(最後一個)
 
4. $("#select_id option[index='0']").remove(); //刪除Select中索引值爲0的Option(第一個)
 
5. $("#select_id option[value='3']").remove(); //刪除Select中Value='3'的Optiona
 
5. $("#select_id option[text='4']").remove(); //刪除Select中Text='4'的Optiona
 
內容清空：$("#charCity").empty();

 

獲取Select選擇的Text和Value: 

$("#select_id").change(function(){//code...}); //爲Select添加事件，當選擇其中一項時觸發
var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的text 
var checkValue=$("#select_id").val(); //獲取Select選擇的Value 
var checkIndex=$("#select_id ").get(0).selectedIndex; //獲取Select選擇的索引值 
var maxIndex=$("#select_id option:last").attr("index"); //獲取Select最大的索引值

 

比如<select class="selector"></select>

1、設置value爲pxx的項選中

 $(".selector").val("pxx");

2、設置text爲pxx的項選中

$(".selector").find("option[text='pxx']").attr("selected",true);

這裏有一箇中括號的用法，中括號裏等號的前面是屬性名稱，不用加引號。很多時候，中括號的運用可以使得邏輯變得很簡單。

3、獲取當前選中項的value

 $(".selector").val();

4、獲取當前選中項的text

 $(".selector").find("option:selected").text();

很多時候用到select的級聯，即第二個select的值隨着第一個select選中的值變化。這在jquery中是非常簡單的。

$(".selector1").change(function(){
     // 先清空第二個
      $(".selector2").empty();
     // 實際的應用中，這裏的option一般都是用循環生成多個了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});

 

這個原生的select操作不全適合select2的操作