2026, 새로운 도약을 시작합니다.

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

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,598
2741 3일 전 조회 123
2740 5일 전 조회 111
2739 1주 전 조회 212
2738 1주 전 조회 218
2737 1주 전 조회 182
2736 2주 전 조회 281
2735 3주 전 조회 285
2734 3주 전 조회 264
2733 1개월 전 조회 266
2732 1개월 전 조회 301
2731 1개월 전 조회 268
2730 1개월 전 조회 227
2729 1개월 전 조회 359
2728 1개월 전 조회 245
2727 1개월 전 조회 422
2726 1개월 전 조회 257
2725 1개월 전 조회 332
2724 1개월 전 조회 361
2723 1개월 전 조회 267
2722 1개월 전 조회 300
2721 1개월 전 조회 213
2720 2개월 전 조회 304
2719 2개월 전 조회 307
2718 2개월 전 조회 202
2717 2개월 전 조회 337
2716 2개월 전 조회 202
2715 2개월 전 조회 313
2714 2개월 전 조회 273
2713 2개월 전 조회 377
2712 2개월 전 조회 289
🐛 버그신고