JSON填充的下拉菜单选中跳转网页的实现方法，是否需要JS？

不需要使用onclick事件，给<select>元素绑定change事件是更合理的实现方式：onclick会在点击下拉框的瞬间触发，此时还未完成选项选择，不符合使用逻辑；change事件仅会在选中的选项值发生变更时触发，完全匹配下拉选完跳转的需求。

你只需要对现有JS代码做两处调整即可：

• 生成<option>元素时，把对应区域的URL存入option的value属性
• 给下拉框绑定change事件，选中后读取对应URL执行跳转

let dropdown = document.getElementById('locality-dropdown');
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Atlantic';
// 默认选项不设置value，选中时不会触发跳转
defaultOption.value = '';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

// 绑定change事件实现跳转
dropdown.addEventListener('change', function() {
  const targetUrl = this.value;
  if (targetUrl) {
    window.location.href = targetUrl;
  }
});

const url = 'http://mlamannadev.com/Stuff/AreaDroDown.json';

fetch(url)  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.warn('请求出现问题，状态码: ' + response.status);  
        return;  
      }
      response.json().then(function(data) {  
        let option;
        for (let i = 0; i < data.length; i++) {
          option = document.createElement('option');
          option.text = data[i].area;
          // 把对应区域的url存入option的value属性
          option.value = data[i].url;
          dropdown.add(option);
        }    
      });  
    }  
  )  
  .catch(function(err) {  
    console.error('请求出错 -', err);  
  });

如果不想选中即跳转，想加个确认步骤的话也可以调整逻辑：在下拉框旁边加个确认按钮，给按钮绑定点击事件，点击时再读取下拉框选中的value执行跳转即可。

内容的提问来源于stack exchange，提问作者tr303808