javascript - 为什么我无法使用 URL 参数设置选择选项的值？

Question

我正在尝试通过与选择关联的 url 参数来设置选择选项的值。我能够毫无问题地对参数的值进行硬编码，如果我尝试通过 JavaScript 以编程方式设置该值，则不会选择这些选项。

假设以下网址:

http://127.0.0.1:8000/dashboard?date_range=ytd&treatments=%5B"1"%2C"15"%5D

我的选择:

<select id="dashboardTreatmentSelector" class="js-example-basic-multiple- form-control" name="treatments[]" multiple="multiple">
<option></option>
<option id="1" data-id="1" value="1">dsfrets</option>
<option id="2" data-id="2" value="2">Aphid Treatment</option>
<option id="15" data-id="15" value="15">boom pow surprise</option>
</select>

我使用以下方法来获取 url 参数的值:

$.urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.search);

return (results !== null) ? results[1] || 0 : false;
}

使用以下方法设置值:

function setValuesBasedOnParams(){
var date_range = $.urlParam('date_range');
var treatments = $.urlParam('treatments');

if(date_range){
    $(".btn_dateRangeSelector").removeClass("btn-primary");
    $("#daterange_"+date_range).addClass("btn-primary");
}
if(treatments){
    var t = decodeURIComponent(treatments);
    var treatments_value = t.replace(/\"/g, "");
    console.log(treatments_value);
    $("#dashboardTreatmentSelector").val(treatments_value);
}
}

参数的值正确地打印到控制台:[1,15]。

我可以手动将控制台中的值输入到我的代码中，然后选择选项:

$("#dashboardTreatmentSelector").val([1,15]);

如果我使用变量treatment_value...打印到控制台的变量，则不会选择选项。

有人有什么想法吗？

谢谢。

Answer 1

我认为treatments_value是一个字符串。尝试在 $("#dashboardTreatmentSelector").val() 中使用 JSON.parse:

$.urlParam = function(name) {
  var url = 'http://127.0.0.1:8000/dashboard?date_range=ytd&treatments=%5B"1"%2C"15"%5D';
  var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(url);
  return (results !== null) ? results[1] || 0 : false;
}

function setValuesBasedOnParams() {
  var date_range = $.urlParam('date_range');
  var treatments = $.urlParam('treatments');

  if (date_range) {
    $(".btn_dateRangeSelector").removeClass("btn-primary");
    $("#daterange_" + date_range).addClass("btn-primary");
  }
  if (treatments) {
    var t = decodeURIComponent(treatments);
    var treatments_value = t.replace(/\"/g, "");
    console.log(treatments_value);
    $("#dashboardTreatmentSelector").val(JSON.parse(treatments_value));
  }
}

setValuesBasedOnParams();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dashboardTreatmentSelector" class="js-example-basic-multiple- form-control" name="treatments[]" multiple="multiple">
  <option></option>
  <option id="1" data-id="1" value="1">dsfrets</option>
  <option id="2" data-id="2" value="2">Aphid Treatment</option>
  <option id="15" data-id="15" value="15">boom pow surprise</option>
</select>