点击前页按钮跳转至预约页后如何自动选中对应radio按钮

你的需求完全可以实现，无需修改现有预约页的单选按钮结构，按以下两步操作即可：

步骤1：给简介页的预约按钮加跳转参数 #

在两位造型师的简介板块，分别给预约按钮加上带参数的跳转链接，示例如下：

<!-- Tristia 简介区域的预约按钮 -->
<a href="你的预约页路径?stylist=tristia">预约Tristia</a>

<!-- Heidi 简介区域的预约按钮 -->
<a href="你的预约页路径?stylist=heidi">预约Heidi</a>

如果你用的是Vue、React等前端框架，用框架自带的路由跳转方法携带对应参数即可，逻辑一致。

步骤2：预约页加载时自动匹配选中造型师 #

在预约页加入以下JS代码，页面加载时会自动读取链接参数，选中对应单选按钮：

window.addEventListener('load', function() {
  // 读取url携带的造型师参数
  const query = new URLSearchParams(window.location.search);
  const selectStylist = query.get('stylist');
  if (!selectStylist) return;

  // 匹配对应单选按钮设为选中状态
  const radio = document.querySelector(`input[name="stylist"][value="${selectStylist}"]`);
  radio && (radio.checked = true);
})

改用下拉选择的实现逻辑和上述方案完全一致，仅需要把单选组件替换为<select>标签即可，两者实现复杂度没有差异，你可以根据页面整体交互风格自由选择。

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