±¸±Û °Ë»ö | https://www.google.co.kr/?gws_rd=ssl#q=jQuery+%EC%97%AC%EB%9F%AC+%EA%B0%9C%EC%9D%98+select+%EC%98%88%EC%A0%9C+PHP&spf=1497510745720 |
À§ »çÀÌÆ® ³»¿ë | |
¼¿·ºÆ® ¹Ú½º3°³¸¦ AJAX ó¸®ÇÏ¿© µ¿ÀûÀ¸·Î ÇÏÀ§ Ä«Å×°í¸®°¡ Ç¥½ÃµÇ´Â °ÍÀ» ¸¸µé´øÁß jquery ¸¦ »ç¿ëÇؼ ÀûÀýÇÏ°Ô Çغ¸ÀÚ Çؼ ¸¸µé¾î º» ¿¹Á¦ÀÔ´Ï´Ù. jquery¸¦ ¸ð¸¦¶§´Â Èûµé¾ú´ø ±â¾ïÀÌ -_-.. Àִµ¥¿ä. ¾Æ·¡Ã³·³ 3´Ü ajax ¼¿·ºÆ® ¹Ú½º°¡ ¿©·¯¼ÂÆ®·Î ³ª¿À´õ¶óµµ (µ¿Àû Ãß°¡°¡ µÇ´õ¶óµµ) Àß ÀÛµ¿µÇ´Â ¿¹Á¦°¡ µÇ¾ú½À´Ï´Ù. ¼¹öÂÊ ¼Ò½º´Â ¾øÁö¸¸ ¾Æ·¡ Äڵ尡 µµ¿òÀÌ µÉ±îÇؼ ¿Ã·Áº¾´Ï´Ù ^^; <form name="form1" method="get" action=""> <div> <select name="code1" onchange="setComboBox(this)" style="width:100px;"> <option value="">- Àüü -</option> <?makeCode1Option();?> </select> <select name="code2" onchange="setComboBox(this)" style="width:100px;"> <option value="">- Àüü -</option> </select> <select name="code3" style="width:100px;"> <option value="">- Àüü -</option> </select> </div> <div> <select name="code1" onchange="setComboBox(this)" style="width:100px;"> <option value="">- Àüü -</option> <?makeCode1Option();?> </select> <select name="code2" onchange="setComboBox(this)" style="width:100px;"> <option value="">- Àüü -</option> </select> <select name="code3" style="width:100px;"> <option value="">- Àüü -</option> </select> </div> ... ¹Ýº¹µµ °¡´É </form> <script type="text/javascript"> function setComboBox(o){ var code = o.value; var div = $(o).parent(); // ¼¿·ºÆ® ¹Ú½ºÀÇ »óÀ§ °´Ã¼ var cnt = $('select', div).size(); // ¼¿·ºÆ® ¹Ú½º °¹¼ö var idx = $('select', div).index(o); // ÇöÀç ¼¿·ºÆ® ¹Ú½ºÀÇ ¼ø¼ var depth = cnt - 1 + idx; var combo = $('select', div).eq(idx + 1); var text = '<option value="">- Àüü -</option>'; if(code == ''){ // Àüü¸¦ ¼±ÅÃÇßÀ» °æ¿ì $('select:gt(' + idx + ')', div).html(text); return; } $.post('/include/util/code_data.php', {depth:depth, code:code}, function(rst){ var data = eval('(' + rst + ')'); var loop = data.length; $('select:gt(' + idx + ')', div).html(text); for(var i=0 ; i<loop ; i++){ combo.append('<option value="' + data[i].code + '">' + data[i].name + '</option>'); } }); } </script> ¼öÁ¤µÈ ½ºÅ©¸³Æ® ´Ù½Ã ¿Ã¸³´Ï´Ù. - 10.01.15 |