Initialization

dhtmlXCombo can be initialized in a plenty of ways. The most simple is initialization from existing selectbox control. All what need to be done
  1. include necessary files
  2. <script src="../js/dhtmlXCommon.js"></script> <script src="../js/dhtmlXCombo.js"></script> <link rel="STYLESHEET" type="text/css" href="../css/dhtmlXCombo.css">
  3. set path to image folder ( or just copy image files to your app folder)
  4. <script> window.dhx_globalImgPath="../imgs/"; </script>
  5. write native select box code
  6. <select style='width:200px;' id="combo_zone1" name="alfa1"> <option value="1">a00</option> <option value="2">a01</option> </select>
  7. create dhtmlXCombo from select control
  8. <script> var z=dhtmlXComboFromSelect("combo_zone1"); </script>
Related sample

The second approach is to create a new combobox inside some html container.
  1. include necessary files
  2. <script src="dhtmlxcommon.js"></script> <script src="dhtmlxcombo.js"></script> <link rel="STYLESHEET" type="text/css" href="dhtmlXCombo.css">
  3. write any container code (DIV is most common)
  4. <div id="combo_zone2" style="width:200px; height:30px;"></div>
  5. create dhtmlXCombo in HTML container
  6. <script> var z=new dhtmlXCombo("combo_zone2","alfa2",200); </script>
Related sample

Adding options

Option can be added in next ways
  1. By addOption command
  2. var z=new dhtmlXCombo("combo_zone3","alfa3",200); z.addOption(value,label,css); It is possible to add few options at once var z=new dhtmlXCombo("combo_zone3","alfa3",200); z.addOption([[value,label,css],[value2,label2,css3],[value3,label3,css3]]);
  3. From XML file
  4. var z=new dhtmlXCombo("combo_zone3","alfa3",200); z.loadXML("xml/data.xml"); Where XML is have next format <?xml version="1.0" ?> <complete> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> <option value="5">five</option> <option value="6">six</option> <option value="7">seven</option> <option value="8">eight</option> <option value="9">nine</option> <option value="10">ten</option> </complete> Possible attributes of <option> tag:
    Sample of XML file   ||   XML definition file
  5. From autocomplete xml file

  6. Plese check "filtration" section for more details
  7. From HTML in case of converting from existing select box

Related sample

Integrating with FORM tag

dhtmlXCombo automatically integrates in surrounding FORM tag. While submitting such form, there are two form wields will be sent to server side Related sample (PHP required for showing server side results)

Filtering

dhtmlXCombo can work in filtering mode. In such mode the values in list filtered by current entered text in edit control. Related sample (PHP required for dynamic autocomplete)

Operations with combobox

Main operations include
  1. Show/Hide combo by combo.show(mode);
  2. Enable/Disable readonly mode by combo.readonly(mode);
  3. Enable/Disable disabled mode by combo.disable(mode);
Related sample

Operations with comobobox's options

  1. Add option - combo.addOption(...);
  2. Delete option - combo.deleteOption(value);
  3. Update option - combo.updateOption(oldvalue,value,text,css);
  4. Get selected value option - combo.getSelectedValue();
  5. Get selected text - combo.getSelectedText();
  6. Get text in combo edit - combo.getComboText();
  7. Set text in combo edit - combo.setComboText();
Related sample