在不同页面上单击链接时更改表单选择字段

Changing form select field with a link clicked on a different page

本文关键字：表单 字段 选择 链接 单击      更新时间：2023-09-26

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

对于一个类似的问题，我能找到的唯一答案是下面这个答案。但是，当表单在单独的页面上时，它似乎不起作用。当我将表单复制到同一页面并使用锚到页面底部时，它会改变字段，但是当使用链接到另一个页面时，它不会。我认为这是因为它在另一个页面上，但是我无法找到关于这种情况的太多信息。

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

用jQuery/Javascript改变下拉选项的链接点击

在两个页面上声明脚本header:

<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>

代码来自Service Page上的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>

提前感谢您的帮助。

实际上你的代码工作，如果你嵌入所有元素在同一个页面，特别是<select>元素，因为你的JS代码是在页面范围内执行的。因此，您可以在点击a href元素时更改选择值。

为了让你的data-select值在BookAppointment.html页面中可用，它的值应该被转发到该页面。综上所述，当您从services.html页面命中a href元素时，data-select值将通过JavaScript处理并封装为查询参数，然后重定向到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页面(注意新的book-appointment-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>
    <!-- more options -->
  </select>
</body>
  • 在book-appointment-script.js文件中，您将捕获selectParam查询参数并根据它更新select选项:
$(document).ready(function () {
  var selectData = unescape(window.location.search.substring(1).split('=')[1]);
  var $select = $('#package');
  $select.val( selectData );
});

您可能需要转义和反转义html特殊字符，因为这只是一个简单的示例

相关文章：