Wordpress 联系表格 7 根据推荐动态自动选择下拉字段 url

Question

我一直在研究这两个答案：

Wordpress Contact Form 7 动态 select 下拉字段基于 url

目前，以下代码粘贴在 /contact 页面的 CSS 块中：

(function($){
$(document).ready(function() {

  //determine the previous page,
  let page = document.referrer, opt='';


  switch(true){
    case page.indexOf(’douglas-h-flint’)>0:
      opt=‘douglashflint’;
      break;
    case page.indexOf(‘john-f-connolly’)>0:
      opt=‘johnfconnolly’;
      break;
    case page.indexOf(‘david-l-walker-jr’)>0:
      opt=‘davidlwalkerjr’;
      break;
  }

  $('select[name=“select-recipient”]’).find('option[value="'+opt+'"]').prop('selected', 'selected');
})
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select-recipient”>
 <option value="">General Inquiry</option>
 <option value=“douglashflint”>Douglas H. Flint</option>
 <option value=“johnfconnolly”>John F. Connolly</option>
 <option value=“davidlwalkerjr”>David L. Walker, Jr.</option>
</select>

我的网站是： https://c7n.f22.myftpupload.com/

我的目标是当有人直接从这些人的个人页面之一导航到 /contact 页面时 - (/attorneys/douglas-h-flint) 或 (/attorneys/john-f-connolly) 或 (/attorneys/david-l -walker-jr)—联系表单中的“查询方式：”下拉字段将自动选择他们各自的姓名，并且当有人从站点上的任何其他页面导航到 /contact 页面时，“查询方式：”下拉字段将保持默认为“一般查询”选项。

我错过了什么？ 或者我做错了什么？

预先感谢您的任何帮助！

Answer 1

观看您拥有的有趣时尚的引语（ ' 、 ' 、 “和” ）。 那些会破坏JS。 从 HTML 标记和 CSS 中删除它们。

除此之外， .prop()方法的第二个参数的预期值是 boolean （ true或false ），因此将是：

$('select[name="select-recipient"]').find('option[value="'+opt+'"]').prop('selected', true);

最后，看到下面的代码粘贴在 CSS 块中，还是挺吓人的……把这段代码放在页面的<head>标记中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function() {

  //determine the previous page,
  let page = document.referrer, opt = '';

  switch(true){
    case page.indexOf('douglas-h-flint') > -1:
      opt = 'douglashflint';
      break;
    case page.indexOf('john-f-connolly') > -1:
      opt = 'johnfconnolly';
      break;
    case page.indexOf('david-l-walker-jr') > -1:
      opt = 'davidlwalkerjr';
      break;
  }

  $('select[name="select-recipient"]').find('option[value="'+opt+'"]').prop('selected', true);
})
</script>

Answer 2

虽然另一个答案是一个很好的答案，但它并不是完全可用的 WordPress。 由于这是联系表格 7 和 WordPress，因此有一些问题。

不要以这种方式重新添加 jQuery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> jQuery 库已经包含在 WordPress 中。
jQuery 以no conflict模式加载，因此您必须首先使用jQuery而不是$初始化
您可以像这样将脚本添加到联系表 7 表单中 虽然这不是绝对最好的方法。 它可以在不将一堆 javascript 添加到另一个文件的情况下工作。 还有一些简单的方法可以使用wp_add_inline_script地正确地将脚本排入队列。

因此，如果您将以下内容添加到您的联系表格中......它将起作用。

<script type="text/javascript">
jQuery(function($) {
  //determine the previous page,
  let page = document.referrer, opt = '';
  switch(true){
    case page.indexOf('douglas-h-flint') > -1:
      opt = 'douglashflint';
      break;
    case page.indexOf('john-f-connolly') > -1:
      opt = 'johnfconnolly';
      break;
    case page.indexOf('david-l-walker-jr') > -1:
      opt = 'davidlwalkerjr';
      break;
  }
  $('select[name="select-recipient"]').find('option[value="'+opt+'"]').prop('selected', true);
});
</script>

Wordpress 联系表格 7 根据推荐动态自动选择下拉字段 url

问题描述

2 个解决方案

解决方案1
0 2021-12-19 04:13:58

解决方案2
0 2021-12-19 11:32:57

Wordpress 联系表格 7 根据推荐动态自动选择下拉字段 url

问题描述

2 个解决方案

解决方案1 0 2021-12-19 04:13:58

解决方案2 0 2021-12-19 11:32:57

解决方案1
0 2021-12-19 04:13:58

解决方案2
0 2021-12-19 11:32:57