Mi menú desplegable está lleno de un archivo JSON " fue obtenido " y me gustaría que cada Área cuando se seleccione vaya a la URL, no tengo idea de cómo lograr esto. ¿Se requiere JS para activar la URL, evento onclick?
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>Paso 1: Cargue datos JSON para select opciones
<select class="form-select" id="locality-dropdown" name="locality" onchange="onChangeRegion(this)"> <option>Choose a Region</option> </select> Función Javascript para crear una option de select dinámica,
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); } Paso 2: Agrega un evento onChange
function onChangeRegion(region) { alert(region.value) // window.location.href= region.value } Paso 3: onChange la redirección de ubicación
function onChangeRegion(region) { window.location.href= region.value }