Question

我有一个服务页面链接到带有表单的约会页面，我希望选择的服务在下拉列表中更改为所选的正确服务。

我能找到的类似问题的唯一解决方案是以下答案。但是，当表单位于单独的页面上时，它似乎不起作用。当我将表单复制到同一页面并使用锚点到页面底部时，它将更改字段，但是当使用指向其他页面的链接时，它不会。我假设这是因为它在另一页上，但我找不到很多关于这种情况。

我已经从我的代码中包含了副本，我相信我已经包含了每个部分的相关代码段。

Change dropdown option with jQuery/Javascript on link click

在两个页面上声明脚本头：

<script src="Scripts/jquery-1.11.1.js"> </script>
<script src="Scripts/jquery-ui-1.11.0.custom/jquery-ui.js"></script>     
<script src="myscript.js"></script>

服务页面上的HTML链接代码：

<a href="BookAppointment.html" data-select="Bronze">

来自JS的代码：

var $select = $('#package');
$('a[href="BookAppointment.html"]').click(function () {
    $select.val( $(this).data('select') );
});

预约表格中的代码（未列出更多选项）：

<select name="package" id="package" >         
    <option value="Exterior Wash">Exterior Wash</option>
    <option value="Bronze">Bronze</option>
    <!-- more options -->
</select>

提前感谢您提供任何帮助。

Answer 1

实际上，如果您将所有元素嵌入到同一页面中，尤其是<select>元素，您的代码就会起作用，因为您的JS代码是在页面范围内执行的。因此，当您点击a href元素时，您可以更改选择值。

为了在 BookAppointment.html 页面中提供data-select值，应将其值与该页面相提并论。总而言之，当您点击 services.html 页面中的a href元素时，data-select值将通过JavaScript处理并封装为查询参数< / strong>然后重定向到 BookAppointment.html 页。

现在让我们假设你的 services.html 页面如下（注意新的service-script.js ）：

<head> <script src="Scripts/jquery-1.11.1.js"> </script> <script src="Scripts/jquery-ui-1.11.0.custom/jquery-ui.js"></script> <script src="service-script.js"></script> </head> <body> <a href="BookAppointment.html" data-select="Bronze"> </body>

在 service-script.js 文件中，您将在a href上捕获用户点击事件，然后检索数据选择值（仅就像你之前做的那样）。新的部分是在您将重定向到的html引用中引入该值：

$(document).ready(function() { $('a[href="BookAppointment.html"]').click(function (e) { e.preventDefault(); var data = $(this).data('select'); window.location = $(this).attr('href') + '?selectParam=' + escape(data); }); });

现在您必须将<select>块移至 BookAppointment.html 页面（注意新书约会 - script.js ）：

<head> <script src="Scripts/jquery-1.11.1.js"> </script> <script src="Scripts/jquery-ui-1.11.0.custom/jquery-ui.js"></script> <script src="book-appointment-script.js"></script> </head> <body> <select name="package" id="package" > <option value="Exterior Wash">Exterior Wash</option> <option value="Bronze">Bronze</option>  </select> </body>

在 book-appointment-script.js 文件中，您将捕获 selectParam 查询参数并根据它更新选择选项：

$(document).ready(function () { var selectData = unescape(window.location.search.substring(1).split('=')[1]); var $select = $('#package'); $select.val( selectData ); });

你可能需要转义和转换html特殊字符，因为这只是一个简单的例子。

更改表单选择字段，并在单独的页面上单击链接

1 个答案: