k

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

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 팁자료실

+
제목 글쓴이 날짜 조회
6년 전 조회 4,009
6년 전 조회 4,968
6년 전 조회 3,078
6년 전 조회 6,364
6년 전 조회 5,879
6년 전 조회 1.1만
6년 전 조회 5,111
6년 전 조회 4,092
6년 전 조회 4,745
6년 전 조회 4,675
6년 전 조회 3,449
6년 전 조회 3,640
6년 전 조회 5,135
6년 전 조회 5,319
6년 전 조회 7,329
6년 전 조회 4,431
6년 전 조회 6,764
6년 전 조회 4,450
6년 전 조회 1.2만
6년 전 조회 4,711
6년 전 조회 4,402
6년 전 조회 4,953
6년 전 조회 3,898
6년 전 조회 3,651
6년 전 조회 7,471
6년 전 조회 2,987
6년 전 조회 6,775
6년 전 조회 1.1만
6년 전 조회 5,573
6년 전 조회 5,389
🐛 버그신고