> 웹 프론트엔드 > 프런트엔드 Q&A > jquery에서 드롭다운 상자의 선택된 값을 설정하는 방법

jquery에서 드롭다운 상자의 선택된 값을 설정하는 방법

PHPz
풀어 주다: 2023-04-26 15:37:56
원래의
3333명이 탐색했습니다.

웹 개발에서는 사용자가 일부 옵션을 선택할 수 있도록 드롭다운 상자(선택이라고도 함)를 사용해야 하는 경우가 많습니다. 때로는 드롭다운 상자의 옵션을 미리 설정해야 하는 경우가 있습니다. 즉, 페이지가 로드될 때 특정 옵션이 선택되어 있어야 합니다. 이때 jquery를 사용하여 드롭다운 상자의 선택된 값을 설정할 수 있습니다.

jquery는 일반적으로 사용되는 JavaScript 라이브러리로, JavaScript 코드 작성을 단순화하고 다양한 편리한 작업 방법을 제공할 수 있습니다. jquery를 사용하여 드롭다운 상자의 선택된 값을 설정하는 경우 먼저 해당 드롭다운 상자 요소를 가져와야 합니다.

드롭다운 상자 요소를 얻는 방법은 여러 가지가 있으며, 이는 드롭다운 상자의 id 속성, 이름 속성, 클래스 속성 등에 따라 얻을 수 있습니다. 드롭다운 상자에 고유 ID 속성이 있는 경우 아래와 같이 $("#id")를 사용하여 드롭다운 상자 요소를 가져올 수 있습니다.

var selectBox = $("#selectBox");
로그인 후 복사

드롭다운 상자에 id 속성이 없는 경우 , $("select[name=selectName ]") 메소드를 사용하여 드롭다운 상자 요소를 얻을 수 있습니다. 여기서 selectName은 드롭다운 상자의 이름 속성 값입니다.

var selectBox = $("select[name=selectName]");
로그인 후 복사

드롭다운 상자 요소를 얻은 후 , jquery를 사용하여 드롭다운 상자의 선택된 값을 설정할 수 있습니다. jQuery는 드롭다운 상자의 선택된 값을 설정하는 두 가지 메서드, 즉 val() 및 prop() 메서드를 제공합니다.

1. 드롭다운 상자의 선택된 값을 설정하려면 val() 메서드를 사용하세요. val() 메서드는 드롭다운 상자의 값을 가져오거나 설정하는 데 사용됩니다. val() 메서드가 매개 변수를 사용하지 않는 경우 현재 선택된 옵션의 값을 가져오는 것을 의미하고, val() 메서드가 매개 변수를 사용하는 경우 드롭다운 상자에서 선택한 값을 지정된 값으로 설정한다는 의미입니다.

다음은 val() 메서드를 사용하여 드롭다운 상자의 선택된 값을 설정하는 샘플 코드입니다.

// 获取下拉框当前选中的值
var selectedValue = selectBox.val();

// 设置下拉框的选中值为指定值
selectBox.val("2");
로그인 후 복사

위 코드에서 먼저 val() 메서드를 사용하여 현재 선택된 드롭다운 상자의 값을 가져옵니다. 드롭다운 상자를 선택한 다음 val("2") 메서드를 사용하여 드롭다운 상자의 선택된 값을 "2"로 설정합니다. 즉, 드롭다운 상자에서 값이 "2"인 옵션을 선택합니다.

2. prop() 메소드를 사용하여 드롭다운 상자의 선택된 값을 설정합니다.

prop() 메소드는 요소의 속성 값을 가져오거나 설정하는 데 사용됩니다. 드롭다운 상자의 경우 prop("selectedIndex", index) 메서드를 사용하여 선택한 옵션을 설정할 수 있습니다. 그 중 인덱스는 드롭다운 상자에서 선택한 옵션의 위치를 ​​0부터 계산합니다.

다음은 prop() 메서드를 사용하여 드롭다운 상자의 선택된 값을 설정하는 샘플 코드입니다.

// 获取当前选中的选项在下拉框中的位置
var selectedIndex = selectBox.prop("selectedIndex");

// 设置下拉框选中的选项为第二项
selectBox.prop("selectedIndex", 1);
로그인 후 복사

위 코드에서 먼저 prop("selectedIndex") 메서드를 사용하여 드롭다운 상자의 위치를 ​​가져옵니다. 드롭다운 상자에서 현재 선택된 옵션을 선택한 다음 prop("selectedIndex", 1) 메서드를 사용하여 드롭다운 상자에서 선택한 옵션을 두 번째 항목으로 설정합니다.

요약

이 기사에서는 jquery를 사용하여 드롭다운 상자의 선택된 값을 설정하는 두 가지 방법인 val()과 prop()을 소개합니다. val() 메서드는 드롭다운 상자의 값을 설정하는 데 사용되고, prop() 메서드는 드롭다운 상자의 속성 값을 설정하는 데 사용됩니다. 두 가지 방법 모두 드롭다운 상자의 선택된 값을 설정하는 기능을 달성하는 데 사용할 수 있으며 실제 상황에 따라 어떤 방법을 사용할지 결정해야 합니다.

위 내용은 jquery에서 드롭다운 상자의 선택된 값을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿