Start Building Professional
Web Apps Today

Master - Slave with XML Combo

How to set-up a Master - Slaves XML combos.

In a combo i select a value. This value includes many subvalues that i want to choose one of them in a second combo.

Classic example: choosing a city that is a subvalue of a state choice.

I was thinking about making many xml, how many are the states, and one big xml with all states.

But how can load the right xml in second combo when i choose the state?

Another way to do that?

Please a bit of a pratical example.

You can use onChange combo

combo.attachEvent("onChange",function(){
    combo2.loadXML(combo.getComboText()+".xml");
});


Also, latest version of combo allows automatic grouping.
    http://dhtmlx.com/docs/products/dhtmlxCombo/samples/initialization/combo_groups.html?un=1214833065000

Sorry but I don't understand what are you meaning...

Follow my example please:

First combo:

    <div id="combo1" style="width:200px; height:30px;"></div>
    <script>
        var z=new dhtmlXCombo("combo1","alfa1",200);
        z.enableFilteringMode(true);
        z.loadXML("data.xml");
    </script>

The second combo need to be a slave of the first, so you suggest this:

combo.attachEvent("onChange",function(){
    combo2.loadXML(combo.getComboText()+".xml");
});

So how i can do this?

    <div id="combo1" style="width:200px; height:30px;"></div>
    <script>
        var z=new dhtmlXCombo("combo1","alfa1",200);
        z.enableFilteringMode(true);
        z.loadXML("data.xml");
    combo.attachEvent("onChange",function(){
    combo2.loadXML(combo.getComboText()+".xml");
})
    </script>

    <div id="combo2" style="width:200px; height:30px;"></div>
    <script>
        var z=new dhtmlXCombo("combo2","alfa2",200);
        z.enableFilteringMode(true);
    </script>


I'm not a very practical boy whit this code... Please help me...

Next, I suppose that I can't use automatic grouping, because every xml was preuploaded, and not dinamically generated by a server side code.

We have used combo and combo1 as an example.

If the master combo is z1 and the slave one is z2, the code should be as follows:

<div id="combo1" style="width:200px; height:30px;"></div>
<div id="combo2" style="width:200px; height:30px;"></div>

<script>
    var z1 = new dhtmlXCombo("combo1","alfa1",200);
    z1.enableFilteringMode(true);
    z1.loadXML("data.xml");

    var z2 = new dhtmlXCombo("combo2","alfa2",200);
    z2.enableFilteringMode(true);

    /*if the option in the master combo is changed, the slave combo will be reloaded*/
    z1.attachEvent("onChange",function(){
        z2.loadXML(z1.getComboText()+".xml");
    });
</script>

You can reload z2 with any xml. In our example xml name is the same with option text  in the master combo.

Thank you so much support, that code works great and perfectly.

Also good explanation code.