여분필드를 한번에 불러오는 방법

옵션 선택 예시





  

    옵션 선택창 1:

    

      선택하세요

      

    

    옵션 선택창 2:

    

      옵션1을 먼저 선택하세요

      

    

  

  

  

    $(document).ready(function() {

      // 페이지 로드 시 옵션1 데이터를 불러오기

      $.ajax({

        url: 'get_options.php',

        type: 'GET',

        dataType: 'json',

        success: function(data) {

          const option1 = $('#option1');

          data.option1.forEach(function(item) {

            option1.append(new Option(item, item));

          });

        }

      });

      // 옵션1 선택 변경 시 옵션2 데이터 불러오기

      $('#option1').change(function() {

        const selectedOption1 = $(this).val();

        $.ajax({

          url: 'get_options.php',

          type: 'GET',

          dataType: 'json',

          data: { option1: selectedOption1 },

          success: function(data) {

            const option2 = $('#option2');

            option2.empty();

            if (data.option2.length > 0) {

              data.option2.forEach(function(item) {

                option2.append(new Option(item, item));

              });

            } else {

              option2.append(new Option('해당 옵션에 대한 결과가 없습니다', ''));

            }

          }

        });

      });

    });