根据单击的 <a> 更改选择选项答案

【问题标题】：Change select option based on <a> clicked根据单击的 <a> 更改选择选项
【发布时间】：2016-10-06 02:53:21
【问题描述】：

我以前见过它，但基本上我想做的是当用户点击“传教士告别/回家”选项时，它会将他们重定向到带有下拉菜单的联系表格，其中“传教士告别” /Homecoming" 已在联系表单中为他们选择，并为各种不同的<a> 标签和不同的选择选项执行此操作。

我要重定向到的 HTML 表单

<form class="contactform" method="post" action="php/events.php">
  <input class="leftbox halfbox" name="contactname" placeholder="Contact's Name">
  <input class="rightbox halfbox" name="eventname" placeholder="Event Name">
  <input class="leftbox halfbox" name="contactphone" placeholder="Contact Phone">
  <input class="rightbox halfbox" name="contactemail" placeholder="Contact Email">
  <select class="fullbox stubborn" name="eventtype">
    <option>What type of event is it?</option>
    <option value="missionary">Missionary Farewell/Homecoming</option>
    <option value="highlight">Athletic/Dance Featurette</option>
    <option value="birthday">Birthday</option>
    <option value="funeral">Funeral</option>
    <option value="graduation">Graduation</option>
    <option value="anniversary">Anniversary</option>
    <option value="engagement">Engagement</option>
    <option value="other">Other</option>
  </select>
  <textarea class="fullbox" id="textarea" name="otheroption" placeholder="If other, please specify"></textarea>
  <input class="leftbox halfbox" name="eventloc" placeholder="Event Location">
  <input class="rightbox halfbox" name="eventtime" placeholder="Event Duration">
  <textarea class="fullbox" id="textarea" name="otherquestions" placeholder="Do you have any other questions/specifications?"></textarea>
  <input class="fullbox stubborn" id="submit" name="submit" type="submit" value="Submit">
</form>

【问题讨论】：

将锚点的 href 设置为带有查询字符串 ?eventtype=missionary 的 URL，然后在新页面中测试查询字符串 - 我可能会在服务器端（PHP，在您的案子）。一般来说，任何给定的锚点都可以根据需要指定尽可能多或少的默认设置。
nnnnnn，你的想法是我最初的想法。我试过你告诉我的，但它还没有做任何事情。服务器端是什么意思？
您使用的是 PHP，对吗？您编写的任何 PHP 代码都会在您的 Web 服务器上执行，并将结果发送到浏览器。您编写的任何 JavaScript 代码都会在浏览器中执行。
所以除了把它扔进href之外还有更多的事情......

标签： javascript html anchor

【解决方案1】：

将锚的href设置为带有事件类型的查询字符串的URL：

<a href="form-page.php?eventtype=missionary">...</a>

在表单页面form-page.php 上，Javascript 读取 URL，解析 eventtype 参数的查询字符串并相应地设置选项菜单。

为了做到这一点，最好给事件下拉列表提供id，让我们使用eventtype：

<select class="fullbox stubborn" name="eventtype" id="eventtype">

然后在结束标记</body> 之前的body 的末尾，你可以这样写：

<script>
    function getParameterByName(name)
    {
        var url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

    document.getElementById('eventtype').value = getParameterByName('eventtype');
</script>

这种方法是纯客户端（纯 html），没有 php 或任何服务器端代码来管理页面。

（当然，同样的目标可以在没有预先选择选项的 Javascript 服务器端构建表单页面的情况下实现）

致谢：

函数getParameterByName()来自：How can I get query string values in JavaScript?

此处描述了如何使用 JavaScript 按值更改所选选项： HTML SELECT - Change selected option by VALUE using JavaScript

【讨论】：