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]);

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

有人有什么想法吗？

谢谢。

Answer 1

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

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

Answer 2

如选择here所示，删除select标签（[]）名称中的treatments[]甚至可能与多属性一起使用

Answer 3

我认为您的变量treatment_values的类型为String而不是实际的数组。

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

3 个答案: