jQuery를 사용하여 드롭다운의 첫 번째 옵션 선택

Neha Imran 2023년6월21일 jQuery jQuery Dropdown
  1. jQuery를 사용하여 <Select> 태그의 첫 번째 옵션 선택
  2. SelectedIndex 속성 사용
  3. val() 메서드 사용
  4. prop() 메서드 사용
  5. attr() 메소드 사용
jQuery를 사용하여 드롭다운의 첫 번째 옵션 선택

이 자습서에서는 jQuery를 사용하여 select 태그의 첫 번째 옵션을 선택합니다. 원하는 기능을 구현하는 데 도움이 되는 다양한 jQuery 구현 전략을 살펴보겠습니다.

jQuery를 사용하여 <Select> 태그의 첫 번째 옵션 선택

드롭다운 메뉴와 목록은 웹 페이지에서 매우 친숙하고 편리합니다. 웹 사이트에 필터를 표시하는 데 도움이 될 수도 있고, 동일한 카테고리의 많은 페이지를 한 곳에 모두 표시하는 탐색 표시줄의 드롭다운 메뉴를 만드는 데 사용할 수도 있습니다.

웹 사이트에서 어떻게 활용하든지 특정 옵션을 미리 선택하고 싶을 때가 있으며 이것이 오늘 기사의 초점입니다. 이 기능을 구현하기 위해 jQuery를 사용하는 방법에 대해 이야기하겠습니다.

jQuery는 웹 페이지에서 JavaScript를 간단하게 활용할 수 있도록 만든 경량 JavaScript 라이브러리입니다. jQuery를 사용하여 <select> 태그의 첫 번째 옵션을 선택하는 다음 네 가지 방법에 대해 설명합니다.

  1. SelectedIndex 속성
  2. .val() 메소드
  3. .prop() 메서드
  4. .attr 방법

SelectedIndex 속성 사용

선택한 옵션의 인덱스는 HTML DOM의 selectedIndex 속성에 의해 드롭다운 목록에 설정되거나 반환됩니다. 인덱스는 0에서 시작합니다.

모든 옵션을 선택 해제하려면 -1 값을 입력하십시오. 사용자가 옵션을 선택하지 않으면 selectedIndex 속성은 -1을 반환합니다.

통사론:

  1. selectedIndex 속성을 반환합니다.

    selectObject.selectedIndex

  2. selectedIndex 속성을 설정합니다.

    selectObject.selectedIndex = 숫자

이 속성의 작동을 이해하려면 아래 예를 확인하십시오.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#drop_down')[0].selectedIndex = 0;
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

출력:

selectedIndex

코드에서 우리가 무엇을 했는지 봅시다. 첫 번째 옵션을 선택하려면 <select> 태그를 선택해야 합니다.

따라서 처음에는 id를 사용하여 요소를 선택합니다. jQuery 선택자 뒤에 [0]을 넣는 것이 혼란스러울 수 있습니다.

이를 이해하는 데 도움이 되도록 자세한 설명을 제공하겠습니다.

jQuery 선택기를 사용하여 특정 요소를 선택하면 선택한 항목의 배열이 제공됩니다. ID를 사용하고 있기 때문에 배열에는 인덱스 0에 있어야 하는 요소가 하나만 있습니다.

이 때문에 반환된 배열의 첫 번째 인덱스를 선택하기 위해 [0]을 씁니다.

필요한 요소가 선택되면 selectedIndex 속성을 호출하고 0 값을 할당합니다. 즉, 첫 번째 옵션을 선택합니다.

우리는 인덱스를 다루기 때문에 1이 아닌 0을 설정하고 인덱스는 0부터 시작하므로 0은 첫 번째 값을 의미하고 1은 두 번째 값을 의미합니다.

val() 메서드 사용

val() 메서드는 HTML 요소 값에 대한 작업을 구현합니다. 이 메소드를 사용하여 특정 요소의 값을 설정하거나 검색할 수 있습니다.

val() 메서드는 value 속성이 있는 HTML 요소에만 적용할 수 있습니다.

통사론:

  1. 선택한 요소의 값을 반환합니다.

    $(선택기).val()

  2. 선택한 요소의 값을 지정한 값으로 설정합니다.

    $(선택자).val(값)

  3. 선택한 요소의 값을 설정하는 기능을 사용합니다. 지정된 경우 currentvalue는 요소의 값을 반환하고 index 매개변수는 요소의 인덱스를 반환합니다.

    $(selector).val(function(index, currentvalue))

val() 메서드를 사용하여 드롭다운 목록에서 첫 번째 항목을 선택합니다. 아래에서 해당 기능을 달성하는 데 도움이 되는 두 가지 전략을 살펴보십시오.

시나리오 1

위에서 설명한 구문을 사용하여 드롭다운 목록에서 첫 번째 또는 임의의 옵션을 선택할 수 있습니다. 우리는 $(selector).val(value)가 선택된 요소의 값을 설정하는 데 사용된다는 것을 알고 있으며 이 방법이 value 속성에서 작동한다는 것도 알고 있습니다.

따라서 먼저 select 요소에서 각 option 태그의 값을 설정한 다음 val() 메서드를 사용하여 필요한 옵션을 선택합니다.

이제 두 번째 옵션을 선택하겠습니다. 아래 코드를 확인하십시오.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#drop_down').val("2");
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option value="1">Value1</option>
            <option value="2">Value2</option>
            <option value="3">Value3</option>
        </select>
    </body>
</html>

출력:

값 방법 1

이것은 매우 간단합니다. value 필드의 option 태그에 값을 설정한 후 인수 값 2를 사용하여 val() 함수를 호출했습니다.

시나리오 2

첫 번째 옵션을 선택하는 또 다른 방법은 선택된 태그의 첫 번째 요소를 반환하는 jQuery의 .first() 메서드를 사용하는 것입니다. 보다 명확하게 이해하려면 아래 코드를 관찰하십시오.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $("#drop_down").val($("#drop_down option").first().val());
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option value="1">Value1</option>
            <option value="2"selected>Value2</option>
            <option value="3">Value3</option>
        </select>
    </body>
</html>

출력:

값 메서드 2

이 접근 방식을 이해하는 데 도움이 되도록 태그에 선택됨을 작성하여 두 번째 옵션을 기본 선택 옵션으로 선택하고 jQuery를 사용하지 않는 경우 두 번째 옵션이 선택된 옵션으로 표시됩니다.

그러나 코드에 jQuery를 추가하고 선택한 요소의 option 태그에 .first() 메서드를 사용했습니다. 출력에서 볼 수 있듯이 첫 번째 옵션이 선택된 것으로 표시됩니다.

이전 버전의 jQuery에서는 이 .first() 메서드를 의사 선택기로 사용했으며 이를 사용하기 위해 $("#drop_down").val($("#drop_down option:first").val()), 그러나 이것은 최신 릴리스에서 더 이상 사용되지 않으며 이 방법을 사용하지 않는 것이 좋습니다.

prop() 메서드 사용

선택한 항목의 속성 및 값은 prop() 함수에 의해 설정되거나 반환됩니다. 이 기능을 사용하여 속성에 액세스할 수 있으므로 드롭다운 목록의 첫 번째 옵션을 쉽게 선택할 수 있습니다.

이 방법을 사용하여 필요한 기능을 구현하는 두 가지 방법에 대해 논의해 보겠습니다.

시나리오 1

우리는 prop() 메서드를 통해 요소의 속성에 액세스할 수 있다는 것을 알고 있습니다. 이 문서에서 필요한 옵션을 선택하기 위해 논의한 첫 번째 접근 방식은 selectedIndex 속성을 사용하는 것입니다.

prop() 메서드를 사용하여 해당 속성에 액세스할 수도 있습니다. 방법은 다음과 같습니다.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#drop_down").prop("selectedIndex", 1)
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

출력:

소유 메서드

코드는 매우 간단하고 이해하기 쉽습니다. 우리는 prop() 메서드에 인덱스 1을 선택하도록 지시했습니다. 이는 옵션 2가 선택될 것임을 나타냅니다.

시나리오 2

option 태그의 selected 속성에 액세스하는 것은 prop() 메서드를 사용하여 드롭다운 목록에서 필요한 옵션을 선택하는 또 다른 방법입니다. 특정 옵션이 기본적으로 선택되기를 원하는 경우가 많으므로 태그에 selected 속성을 추가하여 옵션이 선택되었음을 나타냅니다.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#drop_down option").first().prop("selected", "true");
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

attr() 메소드 사용

attr() 메서드는 선택된 요소의 값과 속성을 설정하거나 반환하는 것을 목표로 합니다. 이 방법을 사용하여 목록에서 필요한 옵션을 쉽게 선택할 수 있습니다.

아래 나열된 두 가지 전략을 살펴보십시오.

시나리오 1

비활성화되지 않은 첫 번째 선택을 선택하고 첫 번째 옵션이더라도 비활성화된 옵션을 무시하려는 특정 상황에 대해 이야기해 봅시다. 필요한 기능을 구현하는 방법을 알아보려면 아래 코드를 검토하십시오.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $("#drop_down option:not([disabled])").first().attr('selected','selected');
            });
        </script>
    </head>
    <body>
        <select id="drop_down" style="width:150px">
            <option selected disabled>Choose the Option</option>
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

먼저 이 방법을 사용하지 않을 경우 출력이 어떻게 되는지 봅시다.

jQuery 이전

선택한 옵션이 첫 번째 옵션입니다. 비활성화되어 있어도 selected 속성을 설정하여 이 옵션을 선택된 것으로 표시할 수 있습니다.

이제 위에서 작성한 코드로 어떤 옵션이 선택되는지 봅시다.

jQuery 이후

놀랍죠? 사용 가능한 첫 번째 비활성화되지 않은 요소가 선택되고 selected 속성 값이 설정됩니다.

시나리오 2

또 다른 흥미로운 시나리오는 원하는 옵션을 선택하기 전에 선택한 option 태그를 제거하려는 경우입니다. 이는 일부 jQuery 메서드를 사용하여 신속하게 수행할 수 있습니다.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $('#drop_down').removeAttr('selected').find('option:first').attr('selected', 'selected');
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

먼저 선택한 옵션을 제거하는 removeAttr() 메서드를 호출했습니다. 그런 다음 find() 메소드를 사용하여 첫 번째 옵션을 검색한 다음 selected 속성 값을 설정합니다.

여기서 한 가지 중요한 점은 코드에서 유사 선택자로 first()를 사용했다는 것입니다. 이미 이것이 더 이상 사용되지 않는다고 논의했습니다. 따라서 브라우저가 지원하지 않는 경우 $('#drop_down').removeAttr('selected').find('option').first().attr('selected', 'selected').

튜토리얼이 마음에 드시나요? DelftStack을 구독하세요 YouTube에서 저희가 더 많은 고품질 비디오 가이드를 제작할 수 있도록 지원해주세요. 구독하다

관련 문장 - jQuery Dropdown