CODEWITHSUNDEEP
javascriptjquery
Kevin
Kevin

Reputation: 62

Why can't I set the value of a select option with my URL parameters?

I am trying to set the value of a select option by the url parameters associated with the select. I am able to hard code the value of the parameters without issue, if I try to programmatically set the value via javascript, the options don't get selected.

Assume the following url:

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

My select:

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

I'm using the following to get the value of the url parameters:

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

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

The values are getting set using the following:

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

The value of the parameter is getting printed to the console fine: [1,15].

I can manually type the value from the console into my code and the options are selected:

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

If I use the variable, treatments_value...the variable that gets printed to the console, the options don't get selected.

Does anyone have any ideas?

Thanks.

Upvotes: 0

Views: 358

Answers (3)

Japsz
Japsz

Reputation: 785

i think your variable treatment_values is of type String instead of being an actual array.

Upvotes: 0

JoshG
JoshG

Reputation: 6745

I think treatments_value is a string. Try using JSON.parse in $("#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>

Upvotes: 1

theParadox42
theParadox42

Reputation: 65

It might work to remove the [] in the name of the select tag (treatments[]), as is shown here, and is even used with the multiple attribute

Upvotes: 0

Related Questions