我的下拉串列由一個 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);
});
uj5u.com熱心網友回復：
<!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>
uj5u.com熱心網友回復：
步驟 1：將JSON資料加載到select選項
<select class="form-select" id="locality-dropdown" name="locality" onchange="onChangeRegion(this)">
<option>Choose a Region</option>
</select>
Javascript創建動態的函式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);
}
第 2 步：添加onChange事件
function onChangeRegion(region) {
alert(region.value)
// window.location.href= region.value
}
第 3 步： onChange位置重定向
function onChangeRegion(region) {
window.location.href= region.value
}
演示鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/330966.html
標籤：javascript html 数组 json 下拉式菜单