My dropdown is filled by a JSON file "its fetched" and I would like each Area when selected to go to the URL, I have no idea how to accomplish this. Is JS required to activate the URL, onclick event?
HTML:
<div class="btn-group">
<ul>
<select class="form-select" id="locality-dropdown" name="locality">
</select>
</ul>
</div>
JSON
[
{
"area": "Central",
"url": "https://www.usps.com/"
},
{
"area": "Southern",
"url": "https://www.usps.com/"
},
{
"area": "WestPac",
"url": "https://www.usps.com/"
}
]
JS
let dropdown = document.getElementById('locality-dropdown');
dropdown.length = 0;
let defaultOption = document.createElement('option');
defaultOption.text = 'Atlantic';
dropdown.add(defaultOption);
dropdown.selectedIndex = 0;
const url = 'http://mlamannadev.com/Stuff/AreaDroDown.json';
fetch(url)
.then(
function(response) {
if (response.status !== 200) {
console.warn('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
let option;
for (let i = 0; i < data.length; i++) {
option = document.createElement('option');
option.text = data[i].area;
dropdown.add(option);
}
});
}
)
.catch(function(err) {
console.error('Fetch Error -', err);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="btn-group">
<ul>
<select onchange="findUrl()" class="form-select" id="locality-dropdown" name="locality">
</select>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
};
//https://mlamannadev.com/Stuff/AreaDroDown.json
//Your URL is not working & I made the same JSON like yours in the URL below.
getJSON('https://api.jsonbin.io/b/6171a4ef4a82881d6c639222/1',
function(err, data) {
var ele = document.getElementById('locality-dropdown');
ele.innerHTML = '<option value="">Select area</option>';
for (var i = 0; i < data.length; i++) {
ele.innerHTML +=
'<option value="' + data[i]['url'] + '">' + data[i]['area'] + '</option>';
}
});
function findUrl(){
var dropDownVal = document.getElementById("locality-dropdown").value;
if(dropDownVal != ""){
window.open(dropDownVal, '_blank').focus();
}
}
</script>
Step 1: Load JSON data to select options
<select class="form-select" id="locality-dropdown" name="locality" onchange="onChangeRegion(this)">
<option>Choose a Region</option>
</select>
Javascript function to create dynamic select option,
var select = document.getElementById("locality-dropdown");
var options = [
{
"area": "Central",
"url": "https://www.usps.com/"
},
{
"area": "Southern",
"url": "https://www.usps.com/"
},
{
"area": "WestPac",
"url": "https://www.usps.com/"
}
];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt.area;
el.value = opt.url;
select.appendChild(el);
}
Step 2: Add an onChange event
function onChangeRegion(region) {
alert(region.value)
// window.location.href= region.value
}
Step 3: onChange location redirect
function onChangeRegion(region) {
window.location.href= region.value
}