JQuery級聯下拉問題？

Question

我使用jQuery基於Cascade plugin可能它的工作，但我發現了很多的問題，它

也許有人已經面臨着這個插件，也許能有所幫助。

所以，我用這個插件中的位置過濾

location http://clip2net.com/clip/m12007/1246819525-clip-2kb.png location http://clip2net.com/clip/m12007/1246819608-clip-3kb.png

這纔是我的CS代碼：

public JsonResult getChildren(string val) 
    { 
     if (val.IsNotNull()) 
     { 
      int lId = val.ToInt(); 
      Cookie.Location = val.ToInt(); 
      var forJSON = from h in Location.SubLocationsLoaded(val.ToInt()) 
          select new { When = val, Id = h.Id, Name = h.Name, LocationName = h.LocationType.Name }; 
      return this.Json(forJSON.ToArray()); 
     } 
     else 
      return null; 
    } 

這纔是我的JS代碼：

<script type="text/javascript"> 
function commonMatch(selectedValue) { 
    $("#selectedLocation").val(selectedValue); 
    return this.When == selectedValue; 
}; 
function commonTemplate(item) { 
    return "<option value='" + item.Id + "'>" + item.Name + "</option>"; 
}; 


$(document).ready(function() { 
    $("#chained_child").cascade("#Countries", { 
     ajax: { 
      url: '/locations/getChildren' 
     }, 
     template: commonTemplate, 
     match: commonMatch 
    }).bind("loaded.cascade", function(e, target) { 
     $(this).prepend("<option value='empty' selected='true'>------[%Select] Län------</option>"); 
     $(this).find("option:first")[0].selected = true; 
    }); 
    $("#chained_sub_child").cascade("#chained_child", { 
     ajax: { 
      url: '/locations/getChildren' 
     }, 
     template: commonTemplate, 
     match: commonMatch 
    }).bind("loaded.cascade", function(e, target) { 
     $(this).prepend("<option value='empty' selected='true'>------[%Select] Kommun------</option>"); 
     $(this).find("option:first")[0].selected = true; 
    }); 
    $("#chained_sub_sub_child").cascade("#chained_sub_child", { 
     ajax: { 
      url: '/locations/getChildren' 
     }, 
     template: commonTemplate, 
     match: commonMatch 
    }).bind("loaded.cascade", function(e, target) { 
     $(this).prepend("<option value='empty' selected='true'>------[%Select] Stad------</option>"); 
     $(this).find("option:first")[0].selected = true; 

    }); 

}); 

我添加一個條件，以jquery.cascade.ext.js

if (opt.getParentValue(parent) != "empty") 
      $.ajax(_ajax); 

爲了防止Ajax請求沒有選擇的值，但我面臨的問題，當我在第一箱三維框復位選擇和波紋管不刷新： WTF? http://clip2net.com/clip/m12007/1246822534-clip-2kb.png

而第二個問題： 我想知道哪裏是注入我自己的功能，將做一些事情，有一個要求，最好的地方 - 我需要知道，所有箱子完成的工作。

如果有人在裏面工作，讓我知道也許我們可以一起找到解決方案。 感謝您的建議...

Answer 1

原始插件代碼的問題在於，它在操作下拉列表後沒有觸發更改事件。

另外，我喜歡用「依賴」而不是「級聯」來思考這個問題。我試圖創建一個簡單的插件和演示頁面，它顯示了整個事情的工作原理。

演示：http://jsbin.com/unope

代碼：http://jsbin.com/unope/edit

讓我來解釋我做了什麼。我創建了名爲'dependent'的插件，可以讓您將依賴項關聯到一個下拉列表。

例如

$('#dropDown2').dependent({ 
          dependency : 'dropDown1', 
          values : getValues 
         }); 

上面的代碼表明，dropDown2取決於dropDown1，所以每當dropDown1值的變化，它會調用你的GetValues函數（傳遞dropDown1）。您應該從您的getValues函數返回相關值，並將它們填充到dropDown2中。

請記住，這段代碼不是通用的，我很快寫了它來演示這個概念。你將不得不進一步調整以達到你想要的結果。

讓我知道如果您有任何問題。