需要下拉列表中的 JSON 才能打开另一个网页

Question

我的下拉列表由一个 JSON 文件“ its fetched ”填充，我希望每个区域在选择时都转到 URL，我不知道如何完成此操作。 是否需要 JS 来激活 URL、onlcick 事件？ 在此先感谢您的帮助。

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

Answer 1

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

Answer 2

步骤 1：加载JSON数据以select选项

<select class="form-select" id="locality-dropdown" name="locality" onchange="onChangeRegion(this)">
   <option>Choose a Region</option>
</select>

用于创建动态select option Javascript函数，

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

第 2 步：添加onChange事件

function onChangeRegion(region) {
   alert(region.value)
   // window.location.href= region.value
}

第 3 步： onChange位置重定向

function onChangeRegion(region) {
   window.location.href= region.value
}

演示链接