如何生成第三方网站URL以选中select标签指定选项

答案是：如果第三方网站没有预先编写解析URL锚点/参数来初始化select选中状态的逻辑，你设想的https://example.com/#year.option="2022"这类URL直接访问是无效的，但可以通过其他工具方式实现类似效果，分两种情况说明：

情况1：第三方网站本身支持URL参数初始化 #

如果该网站的前端代码已经做了对应处理——比如读取URL的查询参数（如?year=2022）或锚点信息，自动同步到select的选中状态，那你只需要按照网站的规则构造对应URL即可。但如果网站没做这个逻辑，直接修改URL不会生效。

情况2：第三方网站不支持，用浏览器脚本实现目标 #

因为你无法修改第三方网站的代码，只能借助浏览器端的脚本工具来实现需求：

• 浏览器书签脚本（Bookmarklet）：
  把一段JS代码保存为浏览器书签，用户访问目标页面后点击书签，就能自动选中指定选项。针对你的示例，代码如下：

  javascript:(function(){
      const select = document.getElementById('year');
      if(select){
          select.value = '2022';
          // 触发change事件，让React等框架感知状态变化
          select.dispatchEvent(new Event('change', {bubbles: true}));
      }
  })();
  

  操作方式：新建浏览器书签，把上述代码粘贴到“网址”栏，命名为“选中2022年”，访问目标页面后点击该书签即可生效。

• 油猴用户脚本（Tampermonkey等）：
  编写一个用户脚本，让浏览器访问该页面时自动解析URL锚点里的参数，自动设置select选中。示例脚本如下：

  // ==UserScript==
  // @name         自动设置年份select选中状态
  // @match        https://example.com/*
  // @grant        none
  // ==/UserScript==
  
  (function() {
      // 解析锚点中的参数
      const hashParams = new URLSearchParams(window.location.hash.slice(1));
      const targetYear = hashParams.get('year.option');
      
      if(targetYear){
          const yearSelect = document.getElementById('year');
          if(yearSelect){
              yearSelect.value = targetYear;
              // 触发change事件同步到React状态
              yearSelect.dispatchEvent(new Event('change', {bubbles: true}));
          }
      }
  })();
  

  用户安装这个脚本后，访问https://example.com/#year.option=2022，脚本会自动读取锚点参数并设置select选中2022的选项。

补充说明 #

React等前端框架驱动的页面，select的选中状态通常和组件内部状态绑定，只有当框架代码主动读取URL参数并同步到状态时，URL的锚点/参数才会生效。如果第三方网站没做这个逻辑，直接修改URL不会触发状态变化，也就无法自动选中选项。

内容的提问来源于stack exchange，提问作者Erithax