Select BOX 선택시 ajax 통신/ 동적으로 select option 추가 하기

​안녕하세요 Korean Leo 입니다 

해당 url로 가면 비쥬얼 스튜디오 코드 스킨으로 보실수 있습니다. 

http://koreanleo.com/bbs/board.php?bo_table=javascript&wr_id=7

오늘 소개드릴 것은 Select BOX (1번 선택) 선택시 ajax통신을 이용한 동적 Selext BOX (2번 추가) 추가하기입니다.
사용 UI

다음은 PHP와 javaScript코드입니다.

                            <div class="adressWrap">

                                <select name="wr_4" class="y1" id="selectID">

                                <option value="" required>선택해주세요</option>

<!-- 사용할데이터 불러오기 -->

                                <?php

                                        $sql="SELECT DISTINCT `쿼리` FROM `쿼리`";

                                        $result = sql_query($sql);

                                        while ($row = sql_fetch_array($result))

                                        {

                                            echo '<option value="'.$row['쿼리'].'">'.$row['쿼리'].'</option>';

                                        }

                                ?>

                                </select>

                                <select name="wr_6" class="y2" id="selectID2" required>

                                </select>

                            </div>

                            <script>

                            $(document).ready(function(){

                                $('#selectID').on('change', function(){

                                        var path  = window.location.href;

                                        // alert(path+"theme/basic/ajaxPHP.php");

                                        $.post(path+"theme/basic/ajaxPHP.php",{optVal:this.value}, function(data) {

                                            $('#selectID2').empty();

                                            $('#selectID2').append('<option value="">선택해주세요</option>');

                                            $('#selectID2').append(data);

                                        });

                                });

                            });

                            </script>

ajaxPHP.php 파일

<?php

include_once('./_common.php');

$ajax = $_POST['optVal'];

$option="";

$sql="SELECT `쿼리` FROM `쿼리` WHERE `쿼리`=\"".$ajax."\"";

// echo $sql;

$result = sql_query($sql);

while ($row = sql_fetch_array($result))

{

    // echo $row['co_gu'];

    $option=$option.'<option value="'.$row['쿼리'].'">'.$row['쿼리'].'</option>';

}

echo $option;

?>

사용 사이트 http://guseo.gabia.io/