TechCodeview

이 기사에서는 jQuery를 사용하여 드롭다운 목록에서 선택한 값을 가져오는 방법을 알아봅니다. 우선 본 글은 jQuery, jQuery selector, jQuery val() 메소드를 이용하여 이해하겠습니다. 그 후에는 다양한 예를 통해 이 주제를 이해해 보겠습니다.

jQuery란 무엇을 의미하나요?

jQuery는 빠르고, 가볍고, 작고, 기능이 풍부한 JavaScript 라이브러리입니다.

날짜를 문자열로 변환

jQuery를 사용하십시오. 드롭다운 목록에서 선택한 옵션 값을 찾으려면 val() 메서드와 함께 선택한 선택기를 사용하세요.

jQuery의 선택기:

선언이 적용되는 HTML 요소입니다.

예를 들어: 선택, 확인 등

Selected는 양식이 처음 로드될 때 기본 선택을 지정하는 데 사용됩니다.

jQuery의 val() 메소드:

이 메소드는 양식 요소의 값을 가져오거나 선택한 요소에 사용되는 속성 값을 설정하는 데 사용됩니다.

통사론:

 $(selector).val (); 

예:

 $('input: text').val ('javaTpoint!'); 

및 태그가 있는 드롭다운 목록입니다.

선택 및 옵션 태그는 드롭다운 메뉴를 만드는 데 사용됩니다. 이를 통해 사용자는 옵션 목록에서 단일 또는 다중 선택을 선택할 수 있습니다. 모든 선택 사항은 화면에 표시되지 않지만 드롭다운 목록을 당기면 표시됩니다. 목록 중 한 항목만 표시되므로 공간을 절약하기 위해 사용됩니다.

풀다운 목록을 생성하려면 태그 대신 태그가 사용됩니다. 쌍을 이루는 태그는 여는 태그로 시작하고 닫는 태그로 끝납니다. 이 태그는 태그와 함께 사용해야 합니다.

통사론:

 Text Label-1 Text Label-2 ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. 

태그와 함께 사용되는 다양한 속성은 다음과 같습니다.

다수의:다양한 옵션을 허용하도록 태그를 설정하는 데 사용됩니다. 기본적으로 사용자가 선택한 단일 옵션을 사용할 수 있습니다. 여러 옵션을 선택하려면 사용자가 옵션을 클릭하는 동안 클릭을 눌러야 합니다.이름:풀다운 목록의 이름을 지정하는 데 사용됩니다.

태그와 함께 사용되는 다양한 속성은 다음과 같습니다.

값:양식이 제출될 때 전송되는 값을 지정하는 데 사용됩니다. 태그에서 value 속성이 생략되면 제목 내용이 사용됩니다.선택된:양식이 브라우저에 처음 로드될 때 미리 선택된 선택 사항을 지정하는 데 사용됩니다.

다음 예제는 jQuery의 드롭다운 목록에서 선택한 값을 가져오는 데 사용됩니다.

예시 1:

jQuery의 드롭다운 목록에서 선택한 값을 가져오는 방법.

 Get Selected Value in drop-down using jQuery h1 { color: green; } h5 { color: green; } h4 { color: green; } p { color: red; } .select { margin: 40px; width: 60%; height: 300px; padding: 30px; border: 2px solid green; } body { background-color: pink; } $(document).ready (function () { $(&apos;select.country&apos;).change (function () { var selectedCountry = $(this).children(&apos;option:selected&apos;).val(); alert (&apos;You have selected the country - &apos; + selectedCountry); }); }); <p> <b> Get Selected Value in drop-down using jQuery </b> </p> <h4> Select Country from drop-down list: </h4> <br> United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

설명:

위의 예에서는 및 태그를 사용하여 드롭다운 목록을 만들었습니다. 여기서는 목록에서 여러 값을 선택하고 목록에서 여러 요소를 선택하고 버튼을 클릭하면 드롭다운 목록에서 선택한 요소와 함께 경고 메시지가 표시됩니다.

 United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

여기,

비교 가능한 자바

Size ='3'은 드롭다운 목록에 표시된 요소 수를 표시하는 데 사용되며, multiple은 드롭다운 목록에서 여러 값을 선택하는 데 사용됩니다.

산출:

이 예제의 출력은 아래와 같습니다.