[DHTMLX] Combo 생성하여 사용하기

완성코드

var myCombo = new dhtmlXCombo("combo_zone", "alfa", 100);
myCombo.addOption([
   ["a", "option A"],
   ["b", "option B"],
   ["c", "option C"]
]);
myCombo.selectOption(0);

 

Combo 생성

• Combo를 하드코딩하여 사용하기 위해서는 dhtmlXCombo 객체를 생성하여 사용하면 된다.
• dhtmlXCombo(value, label, size);
  • value : string형으로 해당 Combo객체의 변수명이라고 생각하면 된다.
  • label : string형으로 해당 Combo의 label이다.
  • size : width size, size의 경우 설정 크기에 따라 컴포넌트의 레이아웃이 변경된다. 나의 경우 200으로 설정했을 때 EditBox로 나왔고, 100으로 설정했을 때 ComboBox로 표현되는것을 확인할 수 있었다.

size 100일 때

size 200일 때

Option 추가

• Combo에 option을 추가하기 위해서는 addOption()을 사용하면 된다.

 

Option Default값 설정

• Combo에 처음에 출력되는 Default값을 설정하기 위해서는 selectOption()을 사용하면 된다.
• selectOption() 의 파라미터 값으로 index값이 입력되면 되는데, addOption()을 통해 추가해준 option에서 Default값으로 설정해줄 index를 설정해주면 되는 것이다. index값은 0부터 생성되며 상단의 완성코드에서 추가한 option인 a, b, c는 숫자 0부터 순서대로 0, 1, 2라는 index를 가진다.
  • index를 0으로 설정해주면 Combo에 'option A'이 출력된다.

option A가 출력됨

 

이외에도 이미지나 색상 등을 설정할 수 있다. 추가적인 설정은 하단의 참고링크를 읽어보자.

 

참고링크

https://docs.dhtmlx.com/combo__adding_options.html

Loading Data DHTMLX Docs

https://dhtmlx.com/docs/products/dhtmlxCombo/samples/04_opts_loading/02_from_script_array_of_array.html?_ga=2.206774547.1041356223.1672022745-139373386.1670308334&_gl=1*eak95h*_ga*MTM5MzczMzg2LjE2NzAzMDgzMzQ.*_ga_N87XPB4GSG*MTY3MjAzNjg5MS45LjEuMTY3MjAzNjk1Ny4wLjAuMA.. 

Script - array of arrays