Need JSON in dropdown to open another webpage-CodePudding

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, onlcick event? Thanks in advanced for any help.

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/"
}
]

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

CodePudding user response：

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

CodePudding user response：

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
}

DEMO Link