Cascading Dropdownlist

[tranenParticipant]

Hi,

I’m trying to do a cascading dropdownlist. The second dropdown will have the value based on the first dropdown value selected.
For now I can get the 2 dropdownlist works and i can’t the value chosen in the first one but the second one never change the value, it always show all the options.
Here is my code:

  var Branddata = '[{"ID": 1, "brand": "browser"},{"ID": 2, "brand": "OS"}]';
    var source =
    {
        dataType: "json",
        datafields: [
            { name: 'brand', type: 'string' },
	    { name: 'ID' }
        ],
        localData: Branddata,
        async: false
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#brand").jqxDropDownList({
        promptText: "Choose:",
        source: dataAdapter,
        displayMember: "brand",
        valueMember: 'ID'
    });

    var Modeldata = '[{"ID": 1, "Model": "chrome"},{"ID": 1, "Model": "opera"},{"ID": 2, "Model": "windows 10"},{"ID": 2, "Model": "linux"}]';
    var Modelsource =
    {
        dataType: "json",
        datafields: [
            { name: 'Model' },
		{ name: 'ID' }
        ],
        localData: Modeldata,
        async: false
    };
    var ModeldataAdapter = new $.jqx.dataAdapter(Modelsource);
    $("#Model").jqxDropDownList({
        promptText: "choose:",
        disabled: true,
        displayMember: "Model",
        valueMember: 'ID'
    });

    $('#brand').bind('select', function(event){
        var args = event.args;
        if (args) {
            $("#Model").jqxDropDownList({ disabled: false, selectedIndex: -1 });
            var value = event.args.item.value;
            Modelsource.data = { 'ID': value };
            ModeldataAdapter = new $.jqx.dataAdapter(Modelsource);
            $("#Model").jqxDropDownList({ source: ModeldataAdapter });

        }
    });
});

How can i make the second dropdownlist only show the id value choose by the first one?
Thanks!

[Peter StoevKeymaster]

Hi tranen,

It is demonstraed here : http://www.jqwidgets.com/jquery-widgets-demo/demos/php/cascadingcombobox.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[tranenParticipant]

Hi,

My code follow the example but doesn’t work.
Is it the array data the problem? I don’t use php so I don’t get the data the same way as the example.
If use local data how it should be written?

Thanks

[Peter StoevKeymaster]

Hi tranen,

When you use local data source, it depends on you what will be displayed within the widget i.e it displays the local data source which you pass to it. I don’t see any difference in your dataAdapters before and after the selection which means that the data you see will be the same always.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[tranenParticipant]

Hi,

My localdata are like this. They have an ID to identify in which group they belongs:

var Branddata = ‘[{“ID”: 1, “brand”: “browser”},{“ID”: 2, “brand”: “OS”}]’;
var Modeldata = ‘[{“ID”: 1, “Model”: “chrome”},{“ID”: 1, “Model”: “opera”},{“ID”: 2, “Model”: “windows 10”},{“ID”: 2, “Model”: “linux”}]’;

is its not possible that the dataAdapters check the ID? For example I select ID = 1 so the second dropdownlist will only show the data with an ID = 1

So if I choose “browser”, it only show “chrome”, “opera”?

Thanks

[Peter StoevKeymaster]

Hi tranen,

The adapter will not filter the data instead of you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts