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