How to use JavaScript to preset drop-down menu selection based on URL parameters

 // 1. Get the full URL string of the current page let url_string = window.location.href;

// 2. Create a URL object let url = new URL(url_string);

// 3. Use the URLSearchParams object to get the value of a specific parameter // For example, if the current URL is http://example.com/page.html?name=Sport
let paramValue = url.searchParams.get("name");

console.log(paramValue); // If the URL contains ?name=Sport, the output is: Sport

Here is a complete example showing how to apply URL parameter values to the drop-down menu:

HTML structure and JavaScript code examples:

 


    <meta charset="UTF-8">
    <title>Preset drop-down menu based on URL parameters</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
    </style>


    <h1>Select your favorite sport</h1>
    <p>Try to access a URL like this:<br>
       <code>http://localhost:8080/your_page.html?name=Sport</code><br>
       or <code>http://localhost:8080/your_page.html?name=Football</code>
    </p>
    <select id="sportSelect">
        <option value="">-- Please select one-</option>
        <option value="Football">Football</option>
        <option value="Basketball">Basketball</option>
        <option value="Sport">Sport (General)</option>
        <option value="Tennis">Tennis</option>
        <option value="Swimming">Swimming</option>
    </select>

    <script>
        // Ensure that the DOM content is fully loaded before executing the script document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
            // 1. Get the URL parameter let url_string = window.location.href;
            let url = new URL(url_string);
            let sportName = url.searchParams.get("name"); // Assume that the URL parameter is named &#39;name&#39;

            // 2. Get the drop-down menu element const selectElement = document.getElementById("sportSelect");

            // 3. Preset drop-down menu selection // Check whether the parameter exists and is not empty, and then try to set the value of the drop-down menu if (sportName) {
                selectElement.value = sportName;
                // Further check whether the option if (selectElement.value !== sportName) {
                    console.warn(`URL parameter value "${sportName}" No match was found in the drop-down menu.`);
                    // You can choose to set a default value, for example:
                    // selectElement.value = ""; // Set to the first "Please select" option}
            } else {
                console.log("No &#39;name&#39; parameter found in the URL.");
            }
        });
    </script>

Detailed explanation of the working principle:

1. document.addEventListener('DOMContentLoaded', ...) : This is the best practice. It ensures that JavaScript code is executed after the entire HTML document is loaded and parsed, thus avoiding the errors that attempts to operate on DOM elements when they are not created.
2. document.getElementById("sportSelect") : Accurately obtain the target element through its id attribute defined in HTML. Please make sure that the id of the tag in your HTML is exactly the same as the ID used in the JavaScript code.
3. selectElement.value = sportName; : This is the core step in implementing the preset. When we set the value attribute of the drop-down menu to a certain string, the browser will automatically find the items whose value attribute matches the string in all sub-elements under the drop-down menu and set it to the selected state. For example, if the value of sportName is "Sport", the option of value="Sport" will be selected.
4. Robustness check : The code has added if (sportName) judgment to ensure that the drop-down menu is only attempted when the URL parameter exists and has a value. In addition, if (selectElement.value !== sportName) is a useful check to determine whether the passed parameter value successfully matches an option in the drop-down menu.

3. Precautions and extensions

In practical applications, in order to ensure the robustness, user experience and security of the code, there are several key points that need to be paid attention to:

1. Ensure that the ID of the element is correct : The ID string used in the document.getElementById() method in JavaScript code must exactly match the id attribute value of the tag in HTML and is case sensitive.
2. Handle cases where the parameters do not exist or the values do not match :
   • If there is no corresponding query parameter in the URL (for example, name in ?name=Sport), or the parameter value does not match any 's value attribute, selectElement.value = paramValue; this line of code will not change the current selected status of the drop-down menu. Usually, it remains the default selection when the page is loaded (usually the first option or the option preset by the selected property).
   • To provide a better user experience, you can set a default option when paramValue is not found or does not match, such as resetting the drop-down menu to "Please Select" or a common default.
3. URL encoding and decoding : If URL parameter values may contain special characters (such as spaces, &, =, etc.), they will usually be URL encoded in the URL (such as spaces becoming). The URLSearchParams.get() method handles decoding automatically, so you usually don't need to call decodeURIComponent() manually. But when building the URL manually, be sure to use encodeURIComponent() to encode the parameter values.
4. Script execution timing : Placing JavaScript code in the DOMContentLoaded event listener, or placing the <script> tag before </script>

The above is the detailed content of How to use JavaScript to preset drop-down menu selection based on URL parameters. For more information, please follow other related articles on the PHP Chinese website!