I'm new to Javascript and I can't find a simple example of this online.
I have a simple HTML page with a select widget on it:
<select name="myProduct">
<option value="aaa">This is AAA</option>
<option value="bbb">This is BBB</option>
<option value="ccc">This is CCC</option>
</select>
What's an easy way to pass a param to the URL like so ...
/mypage.html?selectedProduct=CCC
... and have the value selected in the widget on page load?
I'm new to Javascript and I can't find a simple example of this online.
I have a simple HTML page with a select widget on it:
<select name="myProduct">
<option value="aaa">This is AAA</option>
<option value="bbb">This is BBB</option>
<option value="ccc">This is CCC</option>
</select>
What's an easy way to pass a param to the URL like so ...
/mypage.html?selectedProduct=CCC
... and have the value selected in the widget on page load?
Share Improve this question asked Jul 16, 2020 at 18:41 AndySummers2020AndySummers2020 4511 gold badge8 silver badges16 bronze badges 7-
You can use:
window.location.search.split("=")[1]that will return, in your example,CCC. Then:document.getElementById("myProduct")(you'll have to addid, or usedocument.getElementsByName("myProduct")[0]- if you only have one), then iterate over the options, pare value to lowerCase of CCC and set selected. you'd have to do more work onwindow.location.searchif you're passing more var/val pairs. Oh, and what to do if nothing/different var... – iAmOren Commented Jul 16, 2020 at 19:06 -
document.getElementsByName("myProduct")[0]is a very bad idea. – Scott Marcus Commented Jul 16, 2020 at 19:07 -
@ScottMarcus, I know - it's better to use
idinstead ofname- just went with the data provided. Your answer, withvar urlParams = new URLSearchParams(window.location.search); let queryString = urlParams.get('selectedProduct');is very good! – iAmOren Commented Jul 16, 2020 at 19:10 - @ScottMarcus, that's why I didn't write that as an answer... – iAmOren Commented Jul 16, 2020 at 19:10
-
@iAmOren Actually, it's better not to use ID at all as ID's make code brittle and don't scale. With the code provided, you could/should use
.querySelector()(as I indicate in my link). – Scott Marcus Commented Jul 16, 2020 at 19:11
2 Answers
Reset to default 5Set up a change event handler on the select and append the querystring (that has the value of the select concatenated on to it) to the current URL.
var urlParams = new URLSearchParams(window.location.search);
let queryString = urlParams.get('selectedProduct');
// Find the option in the select that has the same value as
// the query string value and make it be selected
document.getElementById("myProduct").querySelector("option[value='" + queryString + "']").selected = true;<select id="myProduct">
<option value="aaa">This is AAA</option>
<option value="bbb">This is BBB</option>
<option value="ccc">This is CCC</option>
</select>I got it working like so ...
<html>
<head>
/* .... */
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(function() {
var selectedProduct = GetURLParameter("selectedProduct");
if (selectedProduct) {
$("#myProduct").val(selectedProduct);
}
});
function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
</script>
<body>
<select id="myProduct"> <!-- NOTE that's 'id', not 'name' there -->
<option value="aaa">This is AAA</option>
<option value="bbb">This is BBB</option>
<option value="ccc">This is CCC</option>
</select>
</body
</html>