연쇄적으로 select box에 데이터 출력하기

Question

db 테이블에서 항목을 가져와서selectbox를 동적으로 만들어줘야 합니다.예를들어서 어떤 항목의 depth(구조)가 3개이면첫번쨰 select에 뿌려주고 두번째 select 에는 첫항목의 하위 데이터들을 뿌려주구요..[ 1st select box ] select ... from ... where dept &#61;1 ..order by.. [ 2nd select box ] select ... from ... where dept &#61;2 and frontcode &#61; xxx ....order by.. -->여기서 xxx는 1stselectbox 가져오는쿼리문의 code값이 됩니다.[ 3rd select box ] select ... from ... where dept &#61;3 and frontcode &#61; xxx ....order by.. -->여기서 xxx는 2nd selectbox 가져오는쿼리문의 code값이 됩니다.dept 는 3개일수도 5개일수도 있고 동적으로 변해서 select distinct dept from ... 의 결과데이터 갯수를 dept number 로 해서총 select박스를 for문으로 돌리려는데, 앞 데이터의 frontcode를 계속연쇄적으로 가져와서 어떻게 구현해야할까요?jquery 로 만들고 있습니다. 도움 부탁드려요..

마린_7 · Answer

ajax 로 동적 처리 하시면 될텐데요

frostyDog · Answer

for문으로 돌려서 만드시면 index도 가지고 계시지 않나요? 저같으면 만들때 index를 select에 attr로 집어 넣고 모든 select에 change 이벤트 걸어서 자기보다 앞 index가진 select의 값을 가져올것 같네요

시끄럽게살자 · Answer

이런거 말씀하시는건가요?onLoadSuccess 시에 각각의 하위 콤보박스 셋팅하는 거 호출하시면 될듯합니다.아래는 easy-UI에서 예제이고요....(쓰시는 combobox에 onload 속성 있는지 찾아보세요.)$('#cbo1').combobox({onLoadSuccess: function (items) {if (items.length) {//var opts &#61; $(this).combobox('options');//$(this).combobox('select', items[0][opts.valueField]);//두번째 콤보 셋팅 호출}},onSelect: function (row) {var target &#61; this;setTimeout(function () {fnSearch();}, 100);}})

yeori · Answer

아래와 같은 div를 준비하고..

이렇게..let $boxWrapper const loadData = (selBox, callback) => { const {code, depth} = selBox; // $.ajax('/load/${depth}/${code}') const fakeCodes = 'ABCDEFGH'; const c = fakeCodes[depth] // 가라로 만든 데이터 callback( {data: [ {code: `${c}1`}, {code: `${c}2`}, {code: `${c}3`}] }) } const createBox = (depth, prevBox) => { const selBox = new SelectBox($boxWrapper, depth); if (prevBox) { prevBox.nextBox = selBox; } } class SelectBox { constructor($parentEl, depth) { this.$parentEl = $parentEl; this.nextBox = null; // to depth+1 this.depth = depth; this.codes = null; /** init */ this.$sel = $('').appendTo(this.$parentEl); loadData(this, (res) => { this.options = res.data; this.renderOptions(); this.$sel.on('change', (e) => { if (this.nextBox) { this.nextBox.clear(); } createBox(this.depth + 1, this) }) }) } clear() { this.$sel.remove(); if (this.nextBox) { this.nextBox.clear(); } } renderOptions() { this.$sel.empty(); this.$sel.append('') this.options.forEach(option => { this.$sel.append(``) }) } } $(document).ready(() => { $boxWrapper = $('#boxes') createBox(0, null) // as root box (dpeth:0) })

연쇄적으로 select box에 데이터 출력하기

4개의 답변

Q&A 목록