CascadingDropdown jquery plugin

CascadingDropdown is a great jquery plugin to implement cascading drop down in javascript

I suggest you this 2 demo links.

This plugin works great when I navigate to a “create new item” page.
The problem I found is when I navigate to a “edit item” page and I pre fill all dropdown.
When the plugin initialize found the required combo already select it will trigger the change event and It will update the next combo, losing all server side values.
The solution I describe is not great but it works good.
I set a js variable if I’m in edit, then I save the html of the combo before init CascadingDropDown
When the plugin trigger the source function of the second combo I check if I’m in edit and I call response([]) that will made combo empty.

  • I turn firstLoadingInEdit to off
  • I set the server side generated Html
  • I enable the combo because response([]) don’t update enable
  • I use selectPicker JQuery plugin, so I have to refresh it
$(function () {

function initCombo() {
    var isFirstLoadingInEdit = @Model.IdSymbol != 0;
    var oldHtml = $("#editIdParent").html();

        selectBoxes: [
            selector: '#editTypology',
            paramName: 'IdTypology',
            selector: '#editIdParent',
            requires: ['#editTypology'],
            source: function (request, response) {
                if (isFirstLoadingInEdit) {
                    isFirstLoadingInEdit = false;
                    var $editIdParent = $("#editIdParent");

                $.getJSON('@Url.Content("~/Admin/Symbol/SelectParentByTypology")', request, function (data) {
                    var selectOnlyOption = data.length <= 1;

                    response($.map(data, function (item, index) {
                        return {
                            label: item.desc,
                            value: item.key,
                            selected: item.isSelected || selectOnlyOption


            onChange: function (event, value, requiredValues, requirementsMet) {
                $("#dialogGenerateTemplate").attr("href", urlDownloadTemplate + "&ModelId=" + value);

Informazioni su Andrea Regoli

Project Manager .Net Developer WPF WP7 Asp.Net c# javascript ajax SQL sharepoint
Questa voce è stata pubblicata in HTML5, javascript, jquery, plugin e contrassegnata con , , , . Contrassegna il permalink.


Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:


Stai commentando usando il tuo account Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

This site uses Akismet to reduce spam. Learn how your comment data is processed.