如何根据页面加载时的 URL 参数自动选择 <select> 下拉列表的值？

Question

我目前正在一个网站上工作，在“日程表”页面上显示的任何事件上单击“注册”都会进入注册页面，其中下拉列表将根据<select>网址末尾的参数自动选择一个值。但是，我很难确保实际选择具有基于这些参数的值的选项。单击“注册”按钮后，尽管 URL 末尾存在参数，但注册页面上的下拉列表不会显示任何文本。直播网址： brain-train.com.ph/schedules。（在该页面的下拉菜单中选择任何内容，然后单击任何“注册”按钮。）JS：$.urlParam = function(name){    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);    return results[1] || 0;}var service = $.urlParam('service');var batch = $.urlParam('batch');var appendURL = '?service=' + service + '&batch=' + batch;var selectValue = $('.page-enroll .info').data('value');if ( service !== undefined && batch !== undefined ) {    $('.page-enroll select[name="batch"]').val(service + '-' + batch);}

Answer 1

由于您在这里处理的是<option>a 的 s <select>，因此您需要将所选属性分配给所选属性。

其次，由于您正在处理<option>s，因此将调用该属性value而不是val。（如果您提交了，这一点很重要<form>）

所以，你的代码将是这样的：

jQuery('.page-enroll select[name="batch"] option[val="' + service + '-' + batch + '"]').attr("selected", true)

在您的网站上进行了测试:-)

其他一些小建议：通过使用，location.search您可以只阅读后面的部分?（也许可以保存一些正则表达式，例如通过拆分&和=）。

Answer 2

1. 您需要有value自己的选择 - 不需要难以检索的数据属性

2. 如果你有价值，这也会起作用并替换 $.urlParam

如果你没有价值（这没有任何意义），你需要选择选项，attr("val")但这非常难看

const parms = new URLSearchParams("?service=enrichment&batch=QC1"); // this will be location.search

$(function() {

  const value = parms.get("service")+"-"+parms.get("batch");

  $("[name=batch]").val(value); // sets the value attribute! val is the jQuery method

  

  // why you do not need data-attributes on the options:

  

  $("[name=batch]").on("change",function() {

    const [service, batch] = this.value ? this.value.split("-") : ["",""];

    console.log(service,batch);

  })

})

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

<select name="batch">

  <option selected="" disabled="">Preferred venue and batch</option>

  <option disabled="">Grade VI Math Enrichment Program</option>

  <option value="enrichment-SR1">Sta. Rosa, Laguna • Batch 1</option>

  <option value="enrichment-QC1">Quezon City • Batch 1</option>

  <option value="enrichment-LB2">Los Baños, Laguna • Batch 2</option>

  <option disabled="">High School Entrance Test Review</option>

  <option value="hset-LB1">Los Baños, Laguna • PSHS + UPRHS Review – LB1</option>

  <option value="hset-SR1">Sta. Rosa, Laguna • PSHS + UPRHS Review – SR1</option>

  <option value="hset-SR2">Sta. Rosa, Laguna • PSHS + UPRHS Review – SR2</option>

</select>