dnasir / jquery-cascading-dropdown Goto Github PK

If I want to have multiple rows of the same dropdown, changing one affects them all instead of just the dropdown series I'm clicking on.

I think this solves the issue:

diff -r 59ba8a0426ff js/jquery.cascadingdropdown.js
--- a/js/jquery.cascadingdropdown.js    Tue May 20 14:34:28 2014 -0500
+++ b/js/jquery.cascadingdropdown.js    Tue May 20 16:27:12 2014 -0500
@@ -19,12 +19,13 @@
     };

     // Constructor
-    function Dropdown(options, parent) {
-        this.el = $(options.selector, parent.el);
+    function Dropdown(options, parent, index) {
+        if ( typeof index == 'undefined' ) { index = 0; }
+        this.el = $(options.selector, parent.el[index]);
         this.parent = parent;
         this.options = $.extend({}, defaultOptions, options);
         this.name = this.options.paramName || this.el.attr('name');
-        this.requiredDropdowns = options.requires && options.requires.length ? $(options.requires.join(','), parent.el) : null;
+        this.requiredDropdowns = options.requires && options.requires.length ? $(options.requires.join(','), parent.el[index]) : null;
         this.isLoadingClassName = this.options.isLoadingClassName || parent.options.isLoadingClassName || 'cascading-dropdown-loading';
     }

@@ -308,17 +309,19 @@

             // Init dropdowns
             $.each(self.options.selectBoxes, function(index, item) {
-                // Create the instance
-                var instance = new Dropdown(this, self);
+                for ( var i = 0; i < self.el.length; i++ ) {
+                    // Create the instance
+                    var instance = new Dropdown(this, self, i);

-                // Assign it to the element as a data property
-                $(this.selector, self.el).data('plugin_cascadingDropdown', instance);
+                    // Assign it to the element as a data property
+                    $(this.selector, self.el[i]).data('plugin_cascadingDropdown', instance);

-                // Insert it into the dropdown instance array
-                self.dropdowns.push(instance);
+                    // Insert it into the dropdown instance array
+                    self.dropdowns.push(instance);

-                // Call the create method
-                instance._create();
+                    // Call the create method
+                    instance._create();
+                }
             });
         },

Is there a handle to force an update of a selectbox?
My problem is that i have a checkbox that i'm using in the ajax call to the source of a selectbox.

I want the "final" selectbox to update when i click the checkbox, so i don't have to reselect a value

Apologies if this is by design, or a quirk somewhere else, but I'm finding that if I apply cascadingDropdown on a set of buttons once clicked, the 'source' option (ie load from AJAX), only fires the first time, and doesn't fire subsequent times.

My example loads a modal when a button is clicked, which has the cascading dropdowns inside. Depending on the button that's clicked, a value in the dropdown should be selected. However, because the source is only being fired once, the correct value is only selected the first time the modal is loaded.

Apologies if there are slight errors - this is part of a bigger function that's been cleaned to show just the cascading dropdown parts:

// When the button is clicked
$(document).off('click', '.jqBtn').on('click', '.jqBtn', function() {

    // *** The modal loads ***

    // Our modal
    $modal = $('#jqSimulationEditModal');

    // Set our form elements
    $modal.find('form [name="project_location"]').val( $(this).data('project_location') );

    // Grab the project_id from the clicked button
    var project_id = $(this).data('project_id');

    var dropdownOptions = {
        selectBoxes: [
            {
                selector: '[name="project_location"]',
                paramName: 'project_location',
            },
            {
                selector: '[name="project_id"]',
                requires: ['[name="project_location"]'],
                paramName: 'project_id',
                source: function(request, response) {

                    // *** This only fires the first time cascadingDropdown is loaded ***

                    // Get our dropdown data
                    $.post('/projects/ajaxGetDropdowns', request, function(data) {

                    }, 'json').done(function(data) {

                        response($.map(data, function(item, index) {

                            // Preselect our value
                            if(project_id) {

                                if(item.value == project_id) {
                                    var selected = item.label;
                                } else {
                                    var selected = false;
                                }

                            }

                            return {
                                label: item.label,
                                value: item.value,
                                selected: selected ? selected : data.length <= 1 // Select if it's the only option
                            };

                        }));

                    });

                }
            }
        ]
    }

    // Init cascadingDropdown
    $modal.find('form #jqCascadingDropdowns').cascadingDropdown( dropdownOptions );

});

Even if I destroy cascadingDropdown prior to initialising it, the source AJAX only fires once.

Is this by design, a bug, or am I having a dumb moment?

I need to prepopulate both dropdowns in some cases. onReady callback is called to early, passing selected in options doesn't work. Passing in json selected=true works. Would be nice if this could be done from options this way.

    selectBoxes: [
        {
            selector: '[name="' + categoryName + '"]',
            selected: 1,
            source: function (request, response) {
                jq.getJSON('/categories.php', request, function (data) {
                    response(jq.map(data, function (item) {
                        return {
                            label: item[1],
                            value: item[0]
                        }
                    }));
                })
            }
        },
        {
            selector: '[name="' + subcategoryName + '"]',
            requires: ['[name="' + categoryName + '"]'],
            selected: 31,
            source: function (request, response) {
                jq.getJSON('/subcategories.php', request, function (data) {
                    response(jq.map(data, function (item) {
                        return {
                            label: item[1],
                            value: item[0]
                        }
                    }));
                })
            }
        },
    ]

How do I trigger a reload of the dropdown source on a change? The first dropdown in my cascading dropdown is a multiple select containing a list of football teams. When a team is selected I would like the source/select options to update so only the selected team and teams who have played against "selected" team are displayed.

I'm using example 2 dynamic and for some reason the sequential dropdowns are displaying all options instead of relevant options. I have created 3 items that have multiple options, and 1 item that is single option. For testing, I want to select "Number1" from the first dropdown and should only see "Kit1" from the second dropdown, followed by "Standard" and "Large" on the third dropdown. As you can see, it displays all options:

Is this expected from example 2? If so, how would I go about reducing it to pull in only applicable options? Here is a small bit of my product info in case something is wrong on that end (let me know if you need adtl code):

{
    maker: 'XYZ',
    model: 'Menthol E-liquid',
    screen: 'Menthol',
    resolution: ['Nuport', 'Strawberry Menthol', 'Camel Menthol', 'Fire & Ice', 'Dragons Blood', 'Miami Menthol', 'Mango Menthol', 'Peach Menthol', 'Watermelon Ice'],
    storage: ['0mg', '11mg', '14mg', '18mg', '24mg']
},
{
    maker: 'XYZ',
    model: 'Starter Kit',
    screen: 'Number1',
    resolution: 'Kit1',
    storage: ['Standard', 'Large']
}

Thanks for your work on this project - it's proved very helpful thusfar!

I search the web for cascade dropdown list and find this one that almost fits fine. As title says how to add more dropdown list categories (camera resolution, front camera..) and when everything match, a generated list of phones to be a hyperlink (to click on it)?

My knowledge is rather beginners so please be patient in explaining. Talking about BASIC example.

I add in html:

add in ajax-mocks.js new dropdown list

            maker: 'Motorola',
    model: 'Moto X',
    screen: 4.7,
    resolution: 720,
    storage: [16, 32],
    camera: 1

but the rest of js is very hard for me to modify. Especially the part to show hyperlink matches.

Need assistance, thanks.

The data in the drop-down is doubling up how ever the Json return only show one set

$(document).ready(function() {
$('#inventory_category').cascadingDropdown({
textKey: 'label',
valueKey: 'value',
selectBoxes: [
{
selector: '.step1',
paramName: 'cat_id',
url: 'services/inventory_categories/inventory'
},
{
selector: '.step2',
requires: ['.step1'],
paramName: 'equipment_id',
url: 'services/inventory_items/'
},
{
selector: '.step3',
requires: ['.step1', '.step2'],
requireAll: true,
url: 'services/inventory_options/',
}
]
});
});

Json Return

[{"value":1,"label":"Uniform"},{"value":3,"label":"Firearm"},{"value":12,"label":"Ammunition"},{"value":5,"label":"Radios"},{"value":9,"label":"Duty Gear"},{"value":4,"label":"Badge & Insignia"},{"value":6,"label":"HAZOPS Equipment"},{"value":2,"label":"Books & Media"},{"value":13,"label":"Body Armor"}]

In the drop-down this is doubled up

Tried everything I know any help is appreciated

Hello,

I use cascading to fill a datatable width 3 columns ( 3 values of my cascading dropdown ).

When i click on my datarow, i want to set this 3 values on my cascading dropdown. First select is correctly set and i call trigger('change') but i can't set values on my second level and third level.

How i can set values? I want reuse cascading dropdown to UPDATE my datarow.

I modifying the ajax-mocks.js in a way that I changed the values from an integer into a string. It shows more products in the outcome than you would expect on the basis of the chosen input. When I return back to numbers, there isn't a problem anymore and the outcome corresponds with the given input.

i want to print a "label" intead a value, thanks for support!

this is my ajax-mocks:
var phoneList = [
{
url: '70x90',
model: 'Box angolari',
tipologia: 93,
dimensioni: 80,
altezza: [185]
},...

and my index:
{
selector: '.step2',
requires: ['.step1'],
source: function(request, response) {
$.getJSON('/api/dimensionis', request, function(data) {
var selectOnlyOption = data.length <= 1;
response($.map(data, function(item, index) {
return {
label: item, <------ i want to print a label 'Box angolari'
value: item, <------ i want to pick value "80"
selected: selectOnlyOption

I'm using the control for selects with 'multiple' option. It works fine, but the 'selected' parameter only accepts one number or one string, not an array.

When i want to use the control with multiple items selected as default, there is no way I can do such thing.

Hi is posible to use in a multiselect like:

And use selected: to select many options?

In your example of dynamic group of dropdowns (Dynamic), I think it is not working as expected.

1. I have selected a valid value for each dropdown in the group.
   
2. After this, I have selected a different value for the first dropdown, the second dropdown has the right behavior, but in my opinion the third dropdown should be disabled. This would be the appropiate behavior or not?
   

It would be amazing to have an onReady handler on the selectbox level so to speak.

when i have more than 30 selector,get the js error:Maximum call stack size exceeded.

Hi, dnasir,

I've been using a plugin that you make right now, but I want to add some additional attributes on select his option. whether this plugin can handle it?

ex:
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

Hi, I have some small question: What are the purpose of the parameters passed to the source callback function, and is it possible to attach additional parameters to the server request?

I need recreate a cascadingdropdown because I can't reload the source (including selected defaults).
Can you help-me?

Sorry, english is not my language.

Ps: My cascadingdropdown is create after the user scan the barcode, in the first time, this work great. But if the user, scan a new barcode, the dropdown don't update the source (in console, I can't see the ajax call). Its possible update all sources of cascadingdropdown or destroy him to recreate again.

Hi,

Is it possible to have multiple groups where one drop down in group2 would require all drop down selections made in group 1?

Many thanks,

Adam

when i click the browser's back button and land on a page with dropdowns, then data is not populated correctly in dropdowns. can you please verify it at your end and guide how to fix it. Thanks !!

I'm implementing the cascading drop down lists on an asp.net form.

I have 2 drop down lists and another asp.net control.
After making the selections on the drop down lists, I want to do a postback.
I also want the drop down lists to keep it's value.
This can be done using the selected attribute.

When I use selected on the first drop down list, it works.
When I use selected on the second drop down lists, it works.

However, when I set the second drop down list to require the first drop down list, selected stops working after the postback.

Here is what I am trying to do.
I used the sample code which dnasir posted on the demo page.

I created a div - Having 7 drop downs.(two columns, left column 3 drop downs, right column 4 drop downs)
I loaded 3 drop downs which are cascading (calling them Country,State, City), State loads after Country, City loads after State. Works fine.

I added 4 more drop downs on the right (Demand Country,Demand UNIT,Demand Service Line,Demand PU).
Now Demand UNIT,Demand Service Line,Demand PU all need Demand Country. They all load fine.

When one of the Demand UNIT,Demand Service Line,Demand PU change, I need to synchronize the other two. This way I want to give the user option to choose from any drop down, but when he does that the other two automatically get synchronized.

Each of these drop downs has a value that contains the key to the other two drop downs all of the them stored in the value field as comma separated. All I need to do is to access the other drop down and set its value. I am kind of new to JS and unable to figure out how to access the other selector.

Any help how I can do this?

Here is the screenshot:

This is my code, in the .parish-select selector (the dropdown) doesn't default selected option, any idea why?

$('.address-select').cascadingDropdown({
            selectBoxes: [
                {
                    selector: '.estate-select',
                    onChange: function(event, value, requiredValues){
                        //cleanElement('.municipality-select');
                        //cleanElement('.city-select');
                    }
                },
                {
                    selector: '.municipality-select',
                    requires: ['.estate-select'],
                    source: function(request, response) {
                        var estateId = $('.estate-select').val();
                        $.getJSON('/municipios/por-estado/' + estateId, request, function(data) {
                            var selectOnlyOption = data.length <= 1;
                            response($.map(data, function(item, index) {
                                return {
                                    label: item,
                                    value: index,
                                    selected: selectOnlyOption // Select if only option
                                };
                            }));
                        });
                    }
                },
                {
                    selector: '.parish-select',
                    requires: ['.municipality-select'],
                    selected: 26,
                    source: function (request, response) {
                        var municipalityId = $('.municipality-select').val();
                        $.getJSON('/parroquias/por-municipio/' + municipalityId, request, function (data) {
                            response($.map(data, function (item, index) {
                                return {
                                    label: item,
                                    value: index,
                                    selected: selectOnlyOption
                                };
                            }));
                        });
                    }
                },
                {
                    selector: '.city-select',
                    requires: ['.estate-select'],
                    requireAll: true,
                    source: function(request, response) {
                        var estateId = $('.estate-select').val();
                        $.getJSON('/ciudades/por-estado/' + estateId, request, function(data) {
                            response($.map(data, function(item, index) {
                                return {
                                    label: item,
                                    value: index,
                                    selected: index == 0 
                                };
                            }));
                        });
                    }
                }
            ]
        });
...

I'd like to set the value of a nested dropdown via a data-attributes, is there a way to do that?

I ran into an issue where I was requesting JSON from the server, but the data being sent to the server was also being encoded as JSON, rather than urlencoded. This means you would need to use file_get_contents('php://input') rather than $_POST at the server side to access the data being sent.

I believe the useJSON switch should also determine the contentType as JSON or false.

contentType: self.options.useJson ? 'application/json; charset=utf-8' : false,

However, setting useJSON: false, also alters the format of the data coming back from the server, meaning you can't simply pass a URL as the source, set useJSON: true and usePost: true, and expect cascadingDropdown to handle the population of the dropdowns, as it expects JSON to be returned by the server - you receive an Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [...] error.

To summarise, and assuming the server always responds with valid JSON:

source: '/api/CompanyInfo/GetCountries',
usePost: true,
useJson: true,

This would populate the dropdowns correctly as it sets dataType: 'json', but it also sets data: JSON.stringify(request) so you can't access the data in PHP using $_POST, and would need to use file_get_contents('php://input').

source: '/api/CompanyInfo/GetCountries',
usePost: true,
useJson: false,

This would allow you to use $_POST correctly as it sets data: request, but cascadingDropdown falls over because it also sets dataType to undefined rather than json - Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [...]. In this instance, you would need to be passing a function to source to then JSON.stringify(request).

For my scenario, the following would make more sense:

data: self.options.useJson ? JSON.stringify(request) : request,
dataType: 'json',
type: self.options.usePost ? 'post' : 'get',
contentType: self.options.useJson ? 'application/json; charset=utf-8' : false,

Rather than:

data: self.options.useJson ? JSON.stringify(request) : request,
dataType: self.options.useJson ? 'json' : undefined,
type: self.options.usePost ? 'post' : 'get',
contentType: 'application/json; charset=utf-8',

But for full customisation, maybe the plugin needs a useJSONRequest, useJSONResponse?

data: self.options.useJSONRequest ? JSON.stringify(request) : request,
dataType: self.options.useJSONResponse ? 'json' : undefined,
type: self.options.usePost ? 'post' : 'get',
contentType: self.options.useJSONRequest ? 'application/json; charset=utf-8' : false,

First of all I like to compliment and thank Dzulqarnain for this great plugin.

Question
I have been modifying the ajax-mocks.js in a way that I changed the values for screen, resolution or storage from an integer into a string. The outcome however seems to be incorrect. It shows more products in the outcome than you would expect on the basis of the chosen input. When I return back to numbers, there isn't a problem anymore and the outcome corresponds with the given input.

Is there a simple way to solve this problem?

Thanks in advance. Regards, Alexander

I tested your example (dynamic/mixed) using the url: parameter,
And cannot get it to work in the current version - works fine in the used version which is 1.1.3

it will be a good feature if we can show loading progress icon, while data is being loaded from server.

Hi!

How to use the output value with form post or get method?
I have tried to get the data-bind= "text: somevalue" to the form,
but still not working

Using it in the simplest form possible is giving me a "too much recursion" javascript error in console. I am using jQuery v2.0.3.

$('#product-options-wrapper').cascadingDropdown({
        selectBoxes: [
            {
                selector: '#attribute525',
            },
        ]
    });

If I have a group of dependent selects, and changing the value of one group member, causes the others to reload, then a global onChange handler will be called several times. Here's a demo:

http://jsfiddle.net/Qxaa9/5/

In general, I don't think this is the behaviour most people would want, and it would seem much more useful if the handler was only called once after all the selects in the group have been reloaded.

Hello
I have created a 5 cascaded drop-downs with the plugin
for the 3rd 4th and 5th drop-down,s although I have marked "selected" items according to the value, it will show only the 1st value.
the 2nd drop-down works OK

here is the code

http://jsfiddle.net/yochaig/xfwx22bb/7/

thank you in advance

If a parent select is changed programatically, e.g.

$('#parent').val(6);

dependent selects are not reloaded as they would be if the parent's value was changed via the UI. Perhaps this is by design, but if so, it would be worth mentioning in the docs how to update a select programatically in a way that does reload dependent selects. This worked for me:

 $('#parent').val(6).trigger('change');

hi! this cascading dropdown its great!!

can we have the alternative of checkbox for the Multiple select example? that would be very nice!

i mean using this kind of Multiple select usability:

http://silviomoreto.github.io/bootstrap-select/3/
(ctrl+f search for "And with multiple selects:")

 <select class="selectpicker" multiple>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

When a dropdown depends on multiple dropdowns, it executes the source function multiple times.

i.e. Given dropdown B depends on dropdown A, and dropdown C depends on dropdown A and B, when the value of dropdown A changes, dropdown B will execute its source function, and in turn triggers dropdown C to update. But since dropdown C depends on dropdown A and B, it will execute the source function twice, one for each change event. It should only execute the source function once.

The following code for selector: '.DEPT_ID' with source: 'FilterActions.php?action=lstdept'

<form>
    <script type="text/javascript">
        $('#filtering').cascadingDropdown({
        textKey: 'label',
        valueKey: 'value',
        selectBoxes: [
        {
        selector: '.DEPT_ID',
        //paramName: 'DEPT_ID',
        //usePost: true,
        //useJson: true,
        source: 'FilterActions.php?action=lstdept'
        }
    ]
    });
    </script>
    <button type="submit" id="LoadRecordsButton">Load records</button>
</form>

returns the JSON object
[{"label":"Administration","value":"10"},{"label":"Marketing","value":"20"},{"label":"Purchasing","value":"30"},{"label":"Human Resources","value":"40"},{"label":"Shipping","value":"50"},{"label":"IT","value":"60"},{"label":"Public Relations","value":"70"},{"label":"Sales","value":"80"},{"label":"Executive","value":"90"},{"label":"Finance","value":"100"},{"label":"Accounting","value":"110"},{"label":"Treasury","value":"120"},{"label":"Corporate Tax","value":"130"},{"label":"Control And Credit","value":"140"},{"label":"Shareholder Services","value":"150"},{"label":"Benefits","value":"160"},{"label":"Manufacturing","value":"170"},{"label":"Construction","value":"180"},{"label":"Contracting","value":"190"},{"label":"Operations","value":"200"},{"label":"IT Support","value":"210"},{"label":"NOC","value":"220"},{"label":"IT Helpdesk","value":"230"},{"label":"Government Sales","value":"240"},{"label":"Retail Sales","value":"250"},{"label":"Recruiting","value":"260"},{"label":"Payroll","value":"270"},{"label":"tst","value":"280"}]

This is in line with the Example JSON object

[
    {
        "label": "Item 1",
        "value": "1"
    },
    {
        "label": "Item 2",
        "value": "2"
    }
]

The drop down is not coming up. What is the issue and what is the solution.

The php code returning the JSON object is as follows

//Getting records (listAction)
if($_GET["action"] == "lstdept")
{
    $sql = "SELECT DEPARTMENT_ID, DEPARTMENT_NAME FROM departments";
    $result = db_do_query($conn, $sql);

    //Add all records to an array
    $rows = array();
    $stid = oci_parse ($conn, $sql);
    oci_execute($stid);
    while($row=oci_fetch_array($stid, OCI_BOTH))
    {
        $element = array();
        $element["label"]= $row['DEPARTMENT_NAME'];
        $element["value"]= $row['DEPARTMENT_ID'];
        $rows[] = $element;
    }

    //Return result to Form
    $cFilterResult = array();
    $cFilterResult=$rows;
    print json_encode($cFilterResult);
}

Hello!

I am new to AJAX and jQuery, so thank you for all of this!!

My question now is.. I have gotten this down to where it sorts the initial dropdown perfectly, and gives the array of linked 'screen' values .. however, my goal was to have each screen value only show when that particular value is chosen. Currently, when I select the second dropdown item, and say there are 4 values within that dropdown selection, all the maker/model information with show for all 4 entries, rather than the preferred one that was selected. Any idea what could fix this?!

Thanks!!

Hey guys! Great script!

One thing I am noticing is that with a secondary dropdown after the initial option is chosen, has an long list of items which I have organized alphabetically within the included script, however when looking at the dropdown, it is in a random order. Is there any way to set or determine the exact order they'll show in the dropdown?

Thanks!

EDIT:

I have also noticed, that when adding the information/select options one by one, it will stay in successive order as added until around 10-12 items, then it becomes jumbled again (however in a routine matter, always the same jumbled sequence). Any ideas?

Here's a JS Fiddle demo that demonstrates the problem described below.

I tried setting the following as the source JSON

source: [
    {"label":"bank1","value":3},
    {"label":"bank2","value":5},
    {"label":"bank3","value":6, "selected": "selected"}
]

But the 3rd option wasn't selected. I also tried

source: [
    {"label":"bank1","value":3},
    {"label":"bank2","value":5},
    {"label":"bank3","value":6, "selected": true}
]

But this didn't work either. None of the following work either:

source: [
    {"label":"bank1","value":3},
    {"label":"bank2","value":5},
    {"label":"bank3","value":6}
],
selected: 2

source: [
    {"label":"bank1","value":3},
    {"label":"bank2","value":5},
    {"label":"bank3","value":6}
],
selected: 6

source: [
    {"label":"bank1","value":3},
    {"label":"bank2","value":5},
    {"label":"bank3","value":6}
],
selected: "bank3"

It looks like a requirementsMet argument has been added to the onChange handler, but this isn't mentioned in the docs

As it is right now, the onChange event provides event, value and requiredValues - I would like to be able to get the label information as well.
Maybe if you return the selectedObject instead of the value? (if at all possible)
Like -

onChange: function(event, selectObject, requiredValues){
alert(selectObject.value);
alert(selectObject.label);
}

Please consider adding this :) - thanks

See: bugs.jquery.com/ticket/10574

I need to keep using jQuery172 (until the vendor updates the code, but there's no guarantee that this will resolve the issue).

Something in the cascadingDropdown code is causing jQuery to crash -- the code is doing something to a disabled element?

Would you be interested in researching this?

A workaround was implemented the secong answer at:
stackoverflow.com/questions/14622689/ie8-jquery-error-at-line-elem-type
which made the plug-in work fine.

The image: Line 641 of plugins.php is line 1 of jquery.cascadingdropdown.js

I receive this error (in Firefox) loading json for the first dropdown, I'm using source:"/path/file.json" sintax:
TypeError: invalid 'in' operand obj
isArraylike() jquery.js:584
.each() jquery.js:359
Dropdown.prototype._renderItems() jquery.cascadingdropdown.js:232
Dropdown.prototype._response/<() jquery.cascadingdropdown.js:193
Dropdown.prototype._initSource/this.source/self.xhr<.success() jquery.cascadingdropdown.js:128
jQuery.Callbacks/fire() jquery.js:3143
jQuery.Callbacks/self.fireWith() jquery.js:3255
done() jquery.js:9309
.send/callback() jquery.js:9713

In Chrome the same error is described as

jquery.js:584 Uncaught TypeError: Cannot use 'in' operator to search for '2914' in [
{
"label": "Label",
"value": "v"
},
{
"label": "Label",
"value": "v"
},
[...]
{
"label": "Label",
"value": "v"
}
]

The file contains valid json.

I doubt this is a bug, but I can't figure out what is wrong (great plugin by the way - love it!).

I have 4 drop downs, each one fully dependent on the ones above it. When I select a value in the first dropdown, it tries to populate everything before it gets data back from the server causing a bunch of 500 errors because the dropdown values don't yet exist.

I've attached visual of firebug showing the ajax calls which should help to understand what I'm seeing. Any thoughts would be greatly appreciated. Happy to provide my script if that's helpful too.

Thanks!

First of all I like to compliment and thank Dzulqarnain for this great plugin.

Question
I have been modifying the ajax-mocks.js in a way that I changed the values for screen, resolution or storage from an integer into a string. The outcome however seems to be incorrect. It shows more products in the outcome than you would expect on the basis of the chosen input. When I return back to numbers, there isn't a problem anymore and the outcome corresponds with the given input.

Is there a simple way to solve this problem?

Thanks in advance. Regards, Alexander

Hello,

Would it be possible to prefill the dropdowns? Such as http://dnasir.com/github/jquery-cascading-dropdown/demo.html?screen=5&resolution=540

Mabye for your demo this isn't needed, but I am trying to use this plugin with selecting car brand and then models.

Hi,
Does it support multiple selection? I cannot find the option can do that.

Thanks
James

I love this plugin, but I can't figure out how to sort the items in the dropdown by the 'label' rather than the 'value'. For example, here's my JSON array:

{"2":"A","1":"B"}

But then here's my dropdown:

I don't know that this is a bug; likely more of a usability issue. I'm pulling data from a SQL backend to create the JSON array, and the IDs are definitely not in the order I want it to display to the end-user. Is changing the script to sort by label an easy change/tweak?

Thank you in advance. -Dave

Hi, have you ever considered trying to support multiple different controls?

I was starting to think about how to implement this, but not really sure where to start. Do you have any pointers?

Cheers

Daniel

Is there anyway to handle ignored values?

for instance,

<select>
       <option value="">Default</option>
       <option value="1">ONE</option>
       <option value="2">TWO</option>
</select>

I'd like to specify "" as the ignorable value, and enforce that this select requirement is not met until a value other than the default is chosen.