[jQuery]로 드롭다운 내용 채우기 및 원하는 값 선택하기

jQuery로 드롭다운 내용 채우기 및 값 선택하기: 역할별 소스와 설명

안녕하세요, 개발자 여러분! 오늘은 jQuery로 드롭다운(select 태그)에 데이터를 채우고 원하는 값을 선택하는 방법을 역할별로 나눠서 설명드릴게요. 각 단계마다 소스 코드와 자세한 설명을 함께 제공하니 쉽게 따라 하실 수 있을 거예요!

1. HTML 구조 준비

역할: 드롭다운과 버튼을 위한 기본 마크업을 제공합니다.

설명: 드롭다운 메뉴와 데이터를 채우기 위한 버튼을 만듭니다. 초기 상태에서 "선택하세요" 옵션을 기본값으로 설정해 사용자 경험을 개선했어요.

<select id="mySelect">
    <option value="">선택하세요</option>
</select>
<button id="fillDropdown">드롭다운 채우기</button>

2. jQuery 라이브러리 포함

역할: jQuery 기능을 사용하기 위해 라이브러리를 불러옵니다.

설명: CDN을 통해 최신 jQuery를 로드합니다. 이게 없으면 아래 코드들이 동작하지 않으니 반드시 HTML에 포함해야 해요!

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3. 샘플 데이터 준비

역할: 드롭다운에 채울 데이터를 정의합니다.

설명: 과일 목록을 예로 들어 배열 형태로 데이터를 준비했어요. 이 데이터는 여러분의 필요에 맞게 도시, 상품 등으로 자유롭게 수정할 수 있습니다.

// 샘플 데이터: 과일 목록
let fruits = [
    {value: "apple", text: "사과"},
    {value: "banana", text: "바나나"},
    {value: "orange", text: "오렌지"},
    {value: "grape", text: "포도"}
];

4. 드롭다운 내용 채우기

역할: 준비한 데이터를 드롭다운에 추가합니다.

설명: empty()로 기존 내용을 지우고, append()와 $.each()를 사용해 데이터를 option 태그로 변환해 추가합니다.

// 드롭다운 채우기 함수
function fillDropdown() {
    $("#mySelect").empty().append("<option value=''>선택하세요</option>");
    $.each(fruits, function(index, item) {
        $("#mySelect").append(`<option value="${item.value}">${item.text}</option>`);
    });
}

5. 원하는 값 선택하기

역할: 드롭다운에서 특정 값을 기본 선택 상태로 설정합니다.

설명: val() 메소드를 사용해 "banana" 값을 기본으로 선택합니다. 이 함수는 데이터가 채워진 후 호출해야 제대로 동작해요.

// 특정 값 선택
function selectValue() {
    $("#mySelect").val("banana");
}

6. 이벤트 연결

역할: 버튼 클릭 시 기능을 실행합니다.

설명: 버튼 클릭 이벤트를 감지해 드롭다운 채우기와 값 선택 함수를 순차적으로 호출합니다.

// 버튼 클릭 이벤트
$("#fillDropdown").click(function() {
    fillDropdown();  // 드롭다운 채우기
    selectValue();   // 값 선택
});

7. 전체 실습 예제

역할: 모든 기능을 하나로 합친 완성 코드입니다.

설명: 위 역할들을 통합해 버튼을 누르면 과일 목록으로 드롭다운이 채워지고, "바나나"가 선택됩니다.

<select id="mySelect">
    <option value="">선택하세요</option>
</select>
<button id="fillDropdown">드롭다운 채우기</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 샘플 데이터
    let fruits = [
        {value: "apple", text: "사과"},
        {value: "banana", text: "바나나"},
        {value: "orange", text: "오렌지"},
        {value: "grape", text: "포도"}
    ];

    // 드롭다운 채우기
    function fillDropdown() {
        $("#mySelect").empty().append("<option value=''>선택하세요</option>");
        $.each(fruits, function(index, item) {
            $("#mySelect").append(`<option value="${item.value}">${item.text}</option>`);
        });
    }

    // 값 선택
    function selectValue() {
        $("#mySelect").val("banana");
    }

    // 이벤트 연결
    $("#fillDropdown").click(function() {
        fillDropdown();
        selectValue();
    });
</script>

8. 추가 팁

역할: 기능을 확장할 수 있는 유용한 옵션들입니다.

설명: 드롭다운을 더 유연하게 활용할 수 있는 몇 가지 팁을 드려요.

• 선택 이벤트 추가: 사용자가 값을 변경할 때 확인하려면:

    $("#mySelect").change(function() {
        console.log("선택된 값: " + $(this).val());
    });
    

• 데이터 수정: 과일 대신 다른 데이터를 넣고 싶다면 fruits 배열을 원하는 대로 바꿔보세요!

마무리

역할별로 나눠서 보니 코드 흐름이 한눈에 들어오죠? HTML부터 데이터 채우기, 값 선택까지 단계별로 따라 하면서 드롭다운을 자유롭게 다뤄보세요. 궁금한 점 있으면 언제든 댓글로 물어보세요! 다음에 또 실용적인 팁으로 찾아올게요~