2012-10-15 56 views
36

大家好我綁定我的下拉與Jquery-Select2。它的工作正常,但現在我需要通過使用Jquery-Select2來綁定我的多值選擇框。如何在Jquery-Select2中的多值選擇中設置選定的值。

我DropDwon

<div class="divright"> 
         <select id="drp_Books_Ill_Illustrations" 
          class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" 
          multiple=""> 
          <option value=" ">No illustrations</option> 
          <option value="a">Illustrations</option> 
          <option value="b">Maps</option> 
          <option value="c">Portraits</option> 


         </select> 
        </div> 

從這個鏈接http://ivaynberg.github.com/select2/我使用多發的價值選擇框,我可以綁定我的

$("dropdownid").Select2() 

其做工精細dropdwon,但現在我需要獲得選擇價值到我的下拉編輯模式所以我使用這個例子

$(".Books_Illustrations").select2("val", ["a", "c"]); 

它的工作,但我怎麼能修復我的選擇,因爲用戶可以選擇任何東西所以我不能寫一個,靜態這就是爲什麼我需要動態地綁定我的選定值編輯模式。

我想現在你們都清楚我的要求。請讓我知道你是否需要進一步清理。

+0

您需要在文本框中的所有選定的價值? –

+0

我需要我的多值顯示我在編輯模式下的選定值 –

+0

您能解釋我嗎我認爲我可以幫到您 –

回答

41

那麼實際上你只需要$。每次得到的所有值,它會幫助你jsfiddle.net/NdQbw/5

<div class="divright"> 
      <select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> 
       <option value=" ">No illustrations</option> 
       <option value="a" selected>Illustrations</option> 
       <option value="b">Maps</option> 
       <option value="c" selected>selectedPortraits</option> 
      </select> 
    </div> 

<div class="divright"> 
     <select id="drp_Books_Ill_Illustrations1" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> 
      <option value=" ">No illustrations</option> 
      <option value="a">Illustrations</option> 
      <option value="b">Maps</option> 
      <option value="c">selectedPortraits</option> 
     </select> 
</div> 

<button class="getValue">Get Value</button> 
<button class="setValue"> Set value </button> 

<div class="divright"> 
     <select id="drp_Books_Ill_Illustrations2" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> 
      <option value=" ">No illustrations</option> 
      <option value="a" selected>Illustrations</option> 
      <option value="b">Maps</option> 
      <option value="c" selected>selectedPortraits</option> 
     </select> 
</div> 

<div class="divright"> 
     <select id="drp_Books_Ill_Illustrations3" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> 
      <option value=" ">No illustrations</option> 
      <option value="a">Illustrations</option> 
      <option value="b">Maps</option> 
      <option value="c">selectedPortraits</option> 
     </select> 
</div> 

<button class="getValue1">Get Value</button> 
<button class="setValue1"> Set value </button> 

腳本:

var selectedValues = new Array(); 
    selectedValues[0] = "a"; 
    selectedValues[1] = "c"; 

$(".getValue").click(function() { 
    alert($(".leaderMultiSelctdropdown").val()); 
}); 
$(".setValue").click(function() { 
    $(".Books_Illustrations").val(selectedValues); 
}); 

$('#drp_Books_Ill_Illustrations2, #drp_Books_Ill_Illustrations3').select2(); 


$(".getValue1").click(function() { 
    alert($(".leaderMultiSelctdropdown").val()); 
}); 

$(".setValue1").click(function() { 
    //You need a id for set values 
    $.each($(".Books_Illustrations"), function(){ 
      $(this).select2('val', selectedValues); 
    }); 
}); 
+0

實際上,我們是作爲一個字符串獲得價值,而不是一個數組,所以這就是爲什麼我使用包含檢查來只篩選選定的值 –

-1

使用多選功能如下。

$('#drp_Books_Ill_Illustrations').multiSelect('select', 'value'); 
+0

值殼我怎麼樣給,一個像這樣的 –

+0

你的代碼不工作 –

12

所以我拿你想要的2個選項默認選中,然後得到它的值嗎?如果是這樣的:

http://jsfiddle.net/NdQbw/1/

<div class="divright"> 
    <select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> 
     <option value=" ">No illustrations</option> 
     <option value="a" selected>Illustrations</option> 
     <option value="b">Maps</option> 
     <option value="c" selected>selectedPortraits</option> 
    </select> 
</div> 

而得到的值:

alert($(".leaderMultiSelctdropdown").val()); 

要設置值:

$(".leaderMultiSelctdropdown").val(["a", "c"]); 

你也可以使用一個數組來設置值:

var selectedValues = new Array(); 
selectedValues[0] = "a"; 
selectedValues[1] = "c"; 

$(".Books_Illustrations").val(selectedValues); 

http://jsfiddle.net/NdQbw/4/

+0

是的我們可以得到這樣的,但我正在討論在編輯模式下設置選定值,注意從創建模式中獲取值 –

+0

更新回答:$(「。leaderMultiSelctdropdown」)。val([「a」,「c」]); – Geert

+0

Jaminon你的代碼很好,但我們如何修復所選值爲c,它應該是動態的 –

3

只要看看這一個,它會有所幫助。

var valoresArea=VALUES // it has the multiple values to set, separated by comma 
var arrayArea = valoresArea.split(','); 
$('#area').val(arrayArea); 

的URL是 - link

0

不需要做太多事情。 使用多個select2的設定值 var selectedvalue =「1,2,3」; //如果選擇前3個產品。 $('#ddlProduct')。VAL(的SelectedValue);

3

您可以在array添加選定的值,並將其設置爲值默認選擇

如:

var selectedItems =[]; 
selectedItems.push("your selected items"); 
.. 
$('#drp_Books_Ill_Illustrations').select2('val',selectedItems); 

試試這個,這絕對應該努力!

+0

完美!這工作! –

4
var valoresArea=VALUES 
// it has the multiple values to set separated by comma 
var arrayArea = valoresArea.split(','); 
$('#area').select2('val',arrayArea); 
+0

感謝您的回答。不過,如果您可以添加描述來說明您的代碼塊爲何解決該問題,那將會更好。這是一個改進這個和未來答案的建議。謝謝! –

+0

不錯!!!謝謝bro –

0

使用SELECT2庫有2種方式來設定該值 1.當單值存在則可以把它作爲字符串

$("#elementid").select2.("val","valueTobeset") 

2.當使用與多選選項SELECT2你可以傳遞的值的陣列,以選擇2和所有這些值將被設置

var arrayOfValues = ["a","c"] 
$("#elementid").select2.("val",arrayOfValues) 

記住,你可以通過傳遞陣列設置多選單個值也是這樣的

var arrayOfValues = ["a"] 
$("#elementid").select2.("val",arrayOfValues) 
+0

你的代碼中有一些語法錯誤。例如 」。」 select2之後的符號 - select2。(「val」,arrayOfValues)) –

0

這是行不通的。只有一個值永遠是預先選定的,即使這兩個選項在列表中只有第一個可用顯示 ('#searchproject').select2('val', ['New Co-location','Expansion']);

2
This is with reference to the original question 
$('select').val(['a','c']); 
$('select').trigger('change'); 
2

使用選擇2 jQuery庫:

$('#selector').val(arrayOfValues).trigger('change') 
0

下面是一行簡單的解決方案。

EX:var ArrayValue = ["a","b","c"];

$("#select2id").select2("val",(ArrayValue).split(',')); 
0

我得到這個職位是舊的,但也出現了變化,以選擇2是如何工作的,現在和回答這個問題,現在是非常簡單的。

設定值在多選擇2是如下

$('#Books_Illustrations').val([1,2,3]).change(); 

沒有必要指定的jQuery .select2了,只是.val

相關問題