基于 URL 参数，使用 jQuery 设置下拉选项

Question

我发现了很多关于这个主题的类似问题，但 none 确实回答了我的情况，所以我决定 post 一个新问题：

我有一个页面有几个隐藏部分（不同语言的相同内容）。隐藏部分基于语言下拉菜单显示（我为此使用 jQuery 并且同一页面上只有 hides/displays 部分 - 页面 URL 保持不变）这是所有工作。但是，我需要找到一种方法让人们使用他们的语言 selected 访问页面，而不是默认语言英语。

我会使用其中之一：(example.com/page/#german) 或 (example.com/page/?german) 但它需要连接到现有的 jQuery 和 HTML 以便 URL 信息 select 是正确的语言。我该怎么做？

这是select或

语言的HTML

<select id="language_selector">
    <option value="german">Deutsch</option>
    <option value="english" selected >English</option>
    <option value="spanish">Español</option>
    <option value="french">Français</option>
 </select>

这是我用来仅显示 selected 语言 HTML 内容（基于 ID）的 jQuery 代码：

hideAllDivs = function () {
    $("#English").hide();
    $("#French").hide();
    $("#German").hide();
    $("#Spanish").hide();
};

handleNewSelection = function () {
    hideAllDivs();
    
    switch ($(this).val()) {
        case 'english':
            $("#English").show();
        break;
        case 'french':
            $("#French").show();
        break;
        case 'german':
            $("#German").show();
        break;
        case 'spanish':
            $("#Spanish").show();
    }
};

我在想解决这个问题的方法是获取 URL 值，仅 select 参数，然后将其传递给 jQuery 到 select 正确的选项，但我不知道该怎么做，也不会破坏我现有的语言 select 或者（我仍然希望人们能够手动更改他们的语言）

Answer 1

    // url : 'example.com/page?language=german';
    let language = (new URLSearchParams(window.location.search)).get('language') ?? 'english';
    $('#language_selector').val(language);
    handleNewSelection();

基于 URL 参数，使用 jQuery 设置下拉选项

based on URL parameter, set dropdown option with jQuery

html

url

jquery

drop-down-menu