Get data from JSON file to populate dropdown and display other data on select dropdown

Solution for Get data from JSON file to populate dropdown and display other data on select dropdown
is Given Below:

I have a .json file with some info and wht I want to do is to populate my dropdown with some of the info and when I select an option from the dropdown, I want to display more info from the .json file.

So far, I have this:

[{
  "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>

So, when the user select an option, I want to display some data from the .json file according to the selection.

At the moment, I can just make the value to populate the div, but I want to use data from the .json file.

Is that possible?

If you get the json with a http request, you should pass it to the global variable

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>