[JQuery] load() 로 2중 셀렉트박스(select box) 구현하기

네이버 쪽지로 요청이 있어서..

늘 쓰던 식의 JQuery load()를 이용한 2중 셀렉트 박스를 구현하는 소스를 올려보기로 한다.

  <div> <select name='sel_1'> <option value='1'>1번 업체</option> <option value='2'>2번 업체</option> <option value='3'>3번 업체</option> </select> </div> <div id="sel_2_section"></div> <div id="hidden_section"></div> <script type="text/javascript"> <!-- $(document).ready(function() { $("select[name='sel_1']").change(function() { var thisVal = $(this).val(); $("#hidden_section").load("b.php", { "thisVal" : thisVal }); }); }); //--> </script>
b.php의 내용은 load를 이용하여 id="hidden_section"으로 불러와지는 php문서의 내용이다.
  // b.php $sql = "select * from tblName where compcode = '".$thisVal."'"; $result = sql_query($sql); $selBox = "<select name='sel_2'><option value=''>선택하세요.</option>"; while($row = mysql_fetch_array($sql)) { $selBox .= "<option value='".$row['number']."'>".$row['name']."</option>"; } $selBox .= "</select>"; echo <<<END <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function() { $("#sel_2_section").html("$selBox"); $("#sel_2_section").html(""); }); //--> </script> END; ?>
대충 보시면 감이 올듯 싶다.
hidden_section에 php문서를 로드하고 쿼리로 데이터를 가져온후
while문을 사용하여 selBox의 html코드를 변수화한다.
그리고 jquery로 다시 본 페이지에서 html()로 만들어준다...

ps. 댓글이라도 달리면 또 예제를 만들어보겠습니다. ㅡ_ㅡ