k

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

· 2019-12-06 (금) 15:50:07 · 9096 · 1

​안녕하세요 Korean Leo 입니다 

 

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

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

 

오늘 소개드릴 것은 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/

첨부파일

SelectBox.php (1 KB) 90회 2019-12-06 15:50
ajaxPHP.php (371 bytes) 12회 2019-12-06 15:50
|

댓글 1개

감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
20-01-01 조회 6,972
19-12-24 조회 5,977
19-12-22 조회 6,841
19-12-20 조회 4,757
19-12-20 조회 8,199
19-12-16 조회 7,617
19-12-16 조회 1.4만
19-12-16 조회 6,840
19-12-16 조회 5,871
19-12-14 조회 6,509
19-12-12 조회 6,392
19-12-10 조회 5,185
19-12-09 조회 5,408
19-12-08 조회 6,952
19-12-07 조회 7,067
19-12-06 조회 9,097
19-12-05 조회 6,186
19-12-04 조회 8,602
19-12-03 조회 6,194
19-11-28 조회 1.4만
19-11-28 조회 6,502
19-11-28 조회 6,162
19-11-28 조회 6,810
19-11-26 조회 5,681
19-11-26 조회 5,366
19-11-26 조회 9,394
19-11-24 조회 4,589
19-11-20 조회 8,677
19-11-19 조회 1.3만
19-11-19 조회 7,364