如何根据页面加载时的 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&nbsp;<select>，因此您需要将所选属性分配给所选属性。其次，由于您正在处理<option>s，因此将调用该属性value而不是val。（如果您提交了，这一点很重要<form>）所以，你的代码将是这样的：jQuery('.page-enroll&nbsp;select[name="batch"]&nbsp;option[val="'&nbsp;+&nbsp;service&nbsp;+&nbsp;'-'&nbsp;+&nbsp;batch&nbsp;+&nbsp;'"]').attr("selected",&nbsp;true)在您的网站上进行了测试:-)其他一些小建议：通过使用，location.search您可以只阅读后面的部分?（也许可以保存一些正则表达式，例如通过拆分&和=）。

Answer 2

您需要有value自己的选择 - 不需要难以检索的数据属性如果你有价值，这也会起作用并替换 $.urlParam如果你没有价值（这没有任何意义），你需要选择选项，attr("val")但这非常难看const parms = new URLSearchParams("?service=enrichment&batch=QC1"); // this will be location.search$(function() {&nbsp; const value = parms.get("service")+"-"+parms.get("batch");&nbsp; $("[name=batch]").val(value); // sets the value attribute! val is the jQuery method&nbsp;&nbsp;&nbsp; // why you do not need data-attributes on the options:&nbsp;&nbsp;&nbsp; $("[name=batch]").on("change",function() {&nbsp; &nbsp; const [service, batch] = this.value ? this.value.split("-") : ["",""];&nbsp; &nbsp; console.log(service,batch);&nbsp; })})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select name="batch">&nbsp; <option selected="" disabled="">Preferred venue and batch</option>&nbsp; <option disabled="">Grade VI Math Enrichment Program</option>&nbsp; <option value="enrichment-SR1">Sta. Rosa, Laguna • Batch 1</option>&nbsp; <option value="enrichment-QC1">Quezon City • Batch 1</option>&nbsp; <option value="enrichment-LB2">Los Baños, Laguna • Batch 2</option>&nbsp; <option disabled="">High School Entrance Test Review</option>&nbsp; <option value="hset-LB1">Los Baños, Laguna • PSHS + UPRHS Review – LB1</option>&nbsp; <option value="hset-SR1">Sta. Rosa, Laguna • PSHS + UPRHS Review – SR1</option>&nbsp; <option value="hset-SR2">Sta. Rosa, Laguna • PSHS + UPRHS Review – SR2</option></select>