How do you auto-select a <select> drop-down list with values based on URL parameters on page load?

Question

I'm currently working on a website, where clicking "Enroll" on any event shown on the Schedules page would lead to an Enroll page, where a <select> drop-down list would automatically select a value based on parameters placed at the end of the url.

However, I'm having difficulty in making sure that the option with the value based on these parameters actually gets selected. After clicking an "Enroll" button, the drop-down list on the Enroll page doesn't show any text despite the parameters being present at the end of the URL.

Live URL: brain-train.com.ph/schedules. (Select anything on the dropdown menus on that page and click on any "Enroll" button.)

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

Why do you not have value on your options? val is not a valid/useful option attribute — mplungjan
– mplungjan, Commented Mar 24, 2020 at 10:41
Also why have a class on the body tag? There is no need to qualify $('.page-enroll select[name="batch"]') when page-enroll is a class on the body tag — mplungjan
– mplungjan, Commented Mar 24, 2020 at 10:43

Ryuno-Ki · Accepted Answer · 2020-03-24 10:30:45Z

1

Since you're dealing with <option>s of a <select> here, you'll need to assign the attribute selected to the chosen one.

Second, since you're dealing with <option>s, the attribute is called value instead of val. (That's important if you submit the <form>)

So, your code would be along these lines:

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

Tested on your website :-)

Some other small suggestions: By using location.search you can just read the part after ? (and perhaps save some Regular expression, e.g. by splitting on & and =).

answered Mar 24, 2020 at 10:30

Ryuno-Ki

8101 gold badge7 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

php-dev Over a year ago

jQuery('.page-enroll select[name="batch"]').val(service + '-' + batch) should be enough.

mplungjan Over a year ago

@php-dev Not when the HTML options don't have value but val attributes

mplungjan · Accepted Answer · 2020-03-24 10:47:11Z

You need to have value on your options - no need for data attributes which will be hard to retrieve
If you have value, this will work and replace the $.urlParam too

If you do NOT have value (which does not make any sense) you need to select on the option's attr("val") but that is very ugly

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>

Collectives™ on Stack Overflow

How do you auto-select a <select> drop-down list with values based on URL parameters on page load?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related