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

Posted 2023-05-08

【中文标题】基于 URL 参数，使用 jQuery 设置下拉选项

【英文标题】：based on URL parameter, set dropdown option with jQuery

【发布时间】：2021-11-06 01:37:18

【问题描述】：

我发现了很多关于这个主题的类似问题，但没有一个能真正回答我的情况，所以我决定发布一个新问题：

我有一页有几个隐藏部分（不同语言的相同内容）。隐藏部分基于语言的下拉菜单显示（我为此使用 jQuery，它只隐藏/显示同一页面上的部分 - 页面 URL 保持不变）这一切正常。但是，我需要找到一种方法让人们选择他们的语言而不是默认语言（英语）到达页面。

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

这是语言选择器的 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>

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

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 值，仅选择参数，然后将其传递给 jQuery 以选择正确的选项，但我不知道该怎么做，也没有破坏我现有的语言选择器（我仍然希望人们能够手动更改他们的语言）

【参考方案1】：

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

【讨论】：

谢谢！它适用于 URL 切换。但是现在当我转到 example.com/page/（不添加参数）时，没有选择任何语言并且我所有的隐藏部分都显示出来了。我当然可以进行重定向，以便它始终默认为一种语言......但这也许可以在代码中修复？

太棒了！现在一切正常。感谢您的帮助！