如何实现表单选择网站与格式后生成指定URL链接？

当然可以实现！你的需求完全可行，我们只需要对现有代码做一些调整，用JavaScript跟踪两个下拉框的选择状态，然后动态组合出目标链接即可。

问题分析 #

你当前的代码里每个下拉框单独触发跳转，但这无法同时获取两个选择的值——我们需要把网站和格式的选择结合起来，才能生成website.com/?demo=format这样的链接。

解决方案代码 #

这里是修改后的完整代码，包含了链接生成、验证和实时显示的功能：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Site & Format Selector</title>
<script>
function generateLink() {
    // 获取两个下拉框的选中值
    const selectedSite = document.getElementById('siteSelector').value;
    const selectedFormat = document.getElementById('formatSelector').value;
    
    // 验证是否都选择了有效选项
    if (!selectedSite || !selectedFormat) {
        document.getElementById('linkDisplay').innerHTML = "请先选择网站和格式";
        return;
    }
    
    // 组合成目标链接
    const targetLink = `${selectedSite}/?demo=${selectedFormat}`;
    
    // 更新页面上的链接显示，支持点击跳转
    document.getElementById('linkDisplay').innerHTML = 
        `<a href="${targetLink}" target="_blank">点击访问：${targetLink}</a>`;
    
    // 如果需要直接跳转（不需要显示链接），可以注释上面的代码，启用下面这行：
    // window.location.href = targetLink;
}
</script>
</head>
<body>
<select id="siteSelector" onchange="generateLink()">
<option value="">Choose site</option>
<option value="https://google.com">Google</option>
<option value="https://apple.com">Apple</option>
<option value="https://amazon.com">Amazon</option>
</select>

<select id="formatSelector" onchange="generateLink()">
<option value="">Choose format</option>
<option value="375x667">Mobile</option>
<option value="1920x1080">Desktop</option>
<option value="1024x768">Tablet</option>
<option value="1000x1000">1000x1000</option> <!-- 你需要的特定格式 -->
</select>

<div id="linkDisplay" style="margin-top: 15px; padding: 10px; background: #f5f5f5;"></div>
</body>
</html>

关键调整说明 #

• 给两个下拉框添加了id，让JavaScript能精准获取选中值
• 网站选项的value设置为实际的域名（带https://），格式选项的value直接用你需要的参数值（比如1000x1000）
• 编写了generateLink()函数：
  • 先验证用户是否选择了网站和格式
  • 用模板字符串组合出目标链接
  • 在页面上实时显示可点击的链接（也可以改成直接跳转，注释里有说明）
• 给两个下拉框添加了onchange事件，用户每次选择变化都会自动更新链接，体验更流畅

这样当用户选择Google.com和1000x1000时，就会生成并显示https://google.com/?demo=1000x1000这个链接啦！

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