从JSON文件中获取数据以填充下拉菜单，并在选择下拉菜单中显示其他数据

Question

我有一个带有一些信息的。json文件，我想做的是用一些信息填充我的下拉菜单，当我从下拉菜单中选择一个选项时，我想从。json文件中显示更多信息。

到目前为止，我有这个:

[{
"options": "Option 1 on dropdown",
"result1": "Text to populate div1",
"result2": "Text to populate div2"
},
{
"options": "Option 2 on dropdown",
"result1": "Text to populate div1",
"result2": "Text to populate div2"
},
{
"options": "Option 3 on dropdown",
"result1": "Text to populate div1",
"result2": "Text to populate div2"
},
}]
CSS:
<style>
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
</style
HTML:
<select id="sel">
<option value="">Select option</option>
</select>
<div class="box" id="sol"></div>
JS:
<script>
$(document).ready(function(){
var url = "devices.json";
$.getJSON(url, function (data) {
$.each(data, function (index, value) {
$('#sel').append('<option value="' + value.provider + '">' + value.provider + 
'</option>');

}); 
});
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");

if(optionValue){
$(".box").not("." + optionValue).hide();
$("#sol").text(optionValue);
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>

因此，当用户选择一个选项时，我希望根据选择显示来自.json文件的一些数据。

目前，我只能使值填充div，但我想使用来自.json文件的数据。

这可能吗?

Answer 1

如果您通过http请求获得json，您应该将其传递给全局变量

var url = "devices.json";
let data;
$.getJSON(url, function (_data) {
data = _data;
/* no other change */

---

$(document).ready(function(){
var url = "devices.json";
const data = [{
"options": "Option 1 on dropdown",
"result1": "Text to populate div1 - 1",
"result2": "Text to populate div2 - 1"
},
{
"options": "Option 2 on dropdown",
"result1": "Text to populate div1 - 2",
"result2": "Text to populate div2 - 2"
},
{
"options": "Option 3 on dropdown",
"result1": "Text to populate div1 - 3",
"result2": "Text to populate div2 - 3"
}]
//$.getJSON(url, function (data) {
$.each(data, function (index, value) {
$('#sel').append('<option value="' + index + '">' + value.options + 
'</option>');

}); 
//    });
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$("#sol").text(data[optionValue].options);
$("#div1").text(data[optionValue].result1);
$("#div2").text(data[optionValue].result2);
$(".box").show();
/*
$(".box").not("." + optionValue).hide();
$("#sol").text(optionValue);
$("." + optionValue).show();
*/
} else{
$(".box").hide();
}
});
}).change();
});

.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}

body {
background: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel">
<option value="">Select option</option>
</select>
<div class="box" id="sol"></div>
<div class="box" id="div1"></div>
<div class="box" id="div2"></div>