URL 매개 변수를 통해 HTML 선택 요소 선택 값을 동적으로 설정

이 기사에서는 Pure JavaScript를 사용하여 URL의 쿼리 매개 변수를 기반으로 HTML 드롭 다운 메뉴의 선택을 자동으로 설정하는 방법에 대해 자세히 설명합니다. 특정 매개 변수 값을 가져 와서 대상 요소의 값 속성에 할당하기 위해 URL을 구문 분석하면 페이지가로드 될 때 드롭 다운 메뉴의 사전 설정을 알 수 있습니다. 이 방법에는 jQuery가 필요하지 않으며 간단하고 효율적이며 형태 요소를 동적으로 제어 해야하는 시나리오에 적합합니다.

웹 개발에서는 드롭 다운 메뉴 ()와 같은 URL의 특정 매개 변수를 기반으로 페이지에서 요소를 사전 설정해야합니다. 이 요구 사항은 사용자 경험을 필터링, 편집 또는 개인화 할 때 특히 일반적입니다. 이 튜토리얼은 jQuery와 같은 외부 라이브러리의 종속성을 피하기 위해 Pure JavaScript를 사용 하여이 기능을 구현하는 방법을 자세히 설명합니다.

1. URL에서 쿼리 매개 변수를 가져옵니다

먼저 현재 페이지의 URL에서 필요한 매개 변수 값을 추출해야합니다. JavaScript는 URL 및 URLSearchParams API를 제공하며 URL 및 쿼리 문자열을 처리하기위한 강력한 도구입니다.

URL이 http : //example.html? name = sport라고 가정하면 이름 매개 변수의 값을 얻고 싶습니다.

 // 현재 페이지의 전체 URL 문자열을 가져옵니다.

// URL 객체를 작성하여 URL의 여러 부분을 파싱 할 수 있습니다.

// urlsearchparams 객체를 사용하여 쿼리 매개 변수를 가져옵니다. // url.searchparams는 urlsearchparams 인스턴스입니다.

// 현재 이름_param_value의 값은 "스포츠"입니다.
console.log ( "URL에서 얻은 시스템 값 :", name_param_value);

이 코드는 먼저 현재 창의 전체 URL을 취한 다음 URL 객체로 변환합니다. URL 객체의 SearchParams 속성은 query 매개 변수의 값을 편리하게 가져 오기 위해 get () 메소드를 제공하는 URLSearchParams 객체를 반환합니다.

2. 선택 드롭 다운 메뉴에서 선택 항목을 설정합니다.

URL에서 매개 변수 값을 얻으면 다음 단계는 대상 요소에 적용하여 해당 옵션을 선택하도록하는 것입니다. 이를 달성하기위한 열쇠는 획득 한 매개 변수 값을 요소의 값 속성에 직접 할당하는 것입니다.

html 요소의 값 속성은 현재 선택된 요소의 값 속성 값을 나타냅니다. 따라서 의 값을 설정하면 브라우저는 자동으로 일치하는 를 찾아 선택한 상태로 설정합니다.

id mySelect가있는 드롭 다운 메뉴가 있다고 가정합니다.

 <id>를 선택하십시오
   옵션 1 옵션>
   스포츠 옵션>
   음악 옵션>
   art 옵션>
선택></id>

이제 URL에서 얻은 이름_param_value를이 드롭 다운 메뉴에 할당합니다.

 // DOM로드가 완료된 후이 스크립트를 실행하십시오. Document.AdDeventListener ( 'domContentLoaded', function () {
    // URL에서 매개 변수 값을 가져옵니다 (이전에 언급했듯이)
    url_string = window.location.href하자;
    url = new URL (url_string)을하자;
    name_param_value = url.searchparams.get ( "name");

    // 대상 가져 오기 <select> 요소를 선택하십시오.

    // 선택 요소가 존재하는지 여부와 파라미터 값이 If (selectElement && name_param_value) {를 확인하십시오.
        // 획득 한 매개 변수 값을 선택 요소의 값 속성에 할당 selectElement.value = name_param_value;
    } 또 다른 {
        console.warn ( "id 'mySelect'found 또는 url 매개 변수 '이름이없는 요소 없음');
    }
});</select>

3. 완전한 예와 메모

더 나은 이해를 위해 HTML 구조 및 JavaScript 코드를 포함하는 완전한 예는 다음과 같습니다.

html (index.html) :

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
    <title> URL 매개 변수에 따라 드롭 다운 메뉴를 설정하십시오 </title>


    <h1> 관심사를 선택하십시오 </h1>
    <label for="Menutionselect"> 관심 영역 : </label>
    <id>를 선택하십시오
         옵션>을 선택하십시오
         스포츠 옵션>
         음악 옵션>
         art 옵션>
         과학 옵션>
    선택>

    <p> 효과를 확인하려면 다음 URL에 액세스하려고합니다. </p>
    <ul>
        <li> <a href="?%20name%20=%20sport"> set "sport"</a> </li>
        <li> <a href="?%20name%20=%20music"> set "music"</a> </li>
        <li> <a href="?%20name%20=%20science"> set "science"</a> </li>
        <li> <a href="?%20name%20=%20nonexistent"> 존재하지 않는 옵션 세트 </a> </li>
        <li> <a href="?"> 매개 변수 없음 </a> </li>
    </ul>

    <cript>
        // JavaScript 코드는 여기 또는 외부 JS 파일 문서에 배치됩니다. AddeventListener ( 'domcontentLoaded', function () {
            url_string = window.location.href하자;
            url = new URL (url_string)을하자;
            interipparam = url.searchparams.get ( "name"); // "name"이라는 매개 변수를 가져옵니다.

            if (selectElement) {// select 요소가 존재하는지 확인하십시오. if (interparam) {// URL 매개 변수가 존재하는지 확인하십시오 // selectElement.value = meglicparam의 값을 설정하십시오.
                    // 설정 후 선택의 값이 예상 값과 일치하지 않으면 (selectElement.value! == inverteparam)이면 값에 해당하는 옵션이 존재하지 않음을 의미합니다.
                        console.warn (`url 매개 변수 값 "$ {metintleparam}"드롭 다운 메뉴에 일치하는 옵션이 없습니다 .`);
                        // 기본값으로 재설정하거나 프롬프트 selectElement.value = ""를 표시하도록 선택할 수 있습니다. // 예를 들어, "select"로 재설정
                    }
                } 또 다른 {
                    Console.log ( "URL에는 '이름'매개 변수가 없으며 드롭 다운 메뉴는 기본 선택 항목을 유지합니다.");
                }
            } 또 다른 {
                Console.error ( "id 'metertselect'found."가있는 드롭 다운 메뉴 요소 없음);
            }
        });
    스크립트>

</cript></id>

위 내용은 URL 매개 변수를 통해 HTML 선택 요소 선택 값을 동적으로 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!