2015-04-03 187 views
1

使用select2樣式3依賴下拉菜單導致我的項目很多麻煩。3依賴Select2導致無限循環

用例:有3個下拉菜單:A,B和C.C可以單獨選擇,A必須有非默認值B,反之亦然。 在沒有select2的情況下執行此操作很容易,但使用.select2("val"而不是簡單的.val((標準下拉菜單)會導致問題,即通過重置下拉菜單,即使實際值沒有變化,也會導致「更改」事件。

小提琴: http://jsfiddle.net/nmeoosLk/7/

這可能是一個解決方案,但它是優雅? http://jsfiddle.net/8ozv4nr1/

+1

感謝downvote ?! – 2015-04-03 08:46:37

回答

0

有一些事情在這裏涉及,它是有用的知道。

首先,.select2("val", xyz)is equivalent to.val(xyz).trigger("change")。爲什麼引發了change事件的原因是出於兩個原因

  • 舊選擇二的版本用於觸發change事件,所以我們提供了一個簡單的升級路徑。
  • 頁面上的其他組件應該正在偵聽change事件以瞭解<select>的值何時發生更改,因此觸發它是有意義的。

其次,如果觸發change事件,則Select2只能知道<select>的基礎值是否會發生變化。

因此,當您將這兩個問題結合在一起時,它開始解釋爲什麼Select2不像您在change事件中設置新值時所期望的那樣工作。


您可以通過使用select2:select事件來確定一個新的選擇時獲得的,而不是change事件周圍的環狀change事件。

https://jsfiddle.net/nmeoosLk/8/

這是鎖定你到使用特定選擇二的事件,但它是你最好的選擇,如果你不想總是檢查值變化。如果數值沒有改變,我個人建議不要觸發change事件,因爲少量代碼將更好地幫助其他組件理解頁面上發生的事情。

0

當您使用Select2 v4時,這裏是一個通用代碼片段,用於製作級聯/依賴下拉列表。依賴關係可以被鏈接。

使用此模塊,選擇2列表框的選項將是由ajax根據另一個select2列表框的選擇加載/刷新。

https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31

例如 - 親SELECT2列表框的

new Select2Cascade($('#country'), $('#province'), 'path/to/geocode', {type:"province", parent_id: ''}); 
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''}); 

選定值將AJAX調用前被設置爲數據對象的parent_id