Programming Learning Diary

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

페이지 정보

작성일 19-12-06 15:43

본문

​안녕하세요 Korean Leo 입니다 


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

9d748e10398c67f527a887f4f4d77d14_1575614213_1849.png
 

9d748e10398c67f527a887f4f4d77d14_1575614276_0446.png
9d748e10398c67f527a887f4f4d77d14_1575614286_8807.png
 






다음은 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/

댓글목록

등록된 댓글이 없습니다.