DHTMLX Docs & Samples Explorer

Grouping

There is an opportunity to organize groups of interdependent combos. When you select option in a parent combo , a value of selected option is sent with a request and the child combos are filled up with the necessary options.

Combo groups in different containers

Method attachChildCombo allows to set child combo in another container.

It has two parameters:

Combo groups in the same container

You can define a child combo in the same container with its parent by setAutoSubCombo(url,name) method.



Source
<script>
window.dhx_globalImgPath = "../../codebase/imgs/";
</script> <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxcombo.css"> <script src="../../codebase/dhtmlxcommon.js"></script> <script src="../../codebase/dhtmlxcombo.js" type="text/javascript"></script> <script src="../../codebase/ext/dhtmlxcombo_group.js" type="text/javascript"></script> <table> <tr> <td> <div id="combo_zone" style="width:200px; height:30px;"></div> </td> <td> <div id="combo_zone2" style="width:200px; height:30px;"></div> </td> <td> <div id="combo_zone3" style="width:200px; height:30px;"></div> </td> </tr> </table> <div id="combo_zone4" style="width:200px; height:30px;"></div> <br/><br/> <script>
var z3 = new dhtmlXCombo("combo_zone3", "alfa5", 200);
z3.loadXML("php/3.php");
var z2 = new dhtmlXCombo("combo_zone2", "alfa5", 200);
z2.enableFilteringMode(true);
z2.attachChildCombo(z3, "php/3.php");
z2.loadXML("php/2.php")
    var z = new dhtmlXCombo("combo_zone", "alfa2", 200);
z.enableFilteringMode(true);
z.attachChildCombo(z2, "php/2.php");
z.loadXML("../common/1.xml")
    var z4 = new dhtmlXCombo("combo_zone4", "alfa2", 200);
z4.enableFilteringMode(true);
z4.loadXML("../common/1.xml")
    var z5 = z4.setAutoSubCombo("php/2.php", "alpha2");
var z6 = z5.setAutoSubCombo("php/3.php", "alpha3");
</script>