Dropdown Interaction

by Fabi F

HTML

<!-- select -> load content from JSON -->

<select id="dropdown">
    <option>Favorite sweet</option>
</select>

<ul id="list"></ul>

Log List:
<ul id="log"></ul>

JavaScript

var jsonString = '[{"id":1,"description":"Bubble Gum","examples":"Hubba Bubba, Wrigleys, Orbit","img":"bubble_gum.jpg"},{"id":2,"description":"Chocolate","examples":"Milka, Ritter Sport, Lindt","img":"Ritter1.png"}]';
var jsObject = JSON.parse(jsonString);


// fill Dropdown select list
$.each(jsObject, function (key, val) {
    $('#dropdown').append("<option>" + val.description + "</option>");
});


//$(document).ready(function() {
$('#dropdown').change(function() {
    var selectedItem = ( $(this).val() );
    $('#log').append("<li> first logging call </li>");
    $.each(jsObject, function() {
        $('#log').append("<li> second logging call </li>");
        if(this.description==selectedItem){
            $('#log').append("<li> third logging call </li>");
            $('#list').html("<li>Sweet: " + this.description + "</li>"+
                            "<li>Examples: " + this.examples + "</li>"+
                            "<li>Image: " + this.img + "</li>");
        }
    });
});