JSON COLOR SELECT OPTIONS

JSON COLOR SELECT OPTIONS - andrew pougher

by Andrew Pougher

HTML

<select id="colorlisting"></select>
<p>You Chose:</p>
<div class="base_color"></div>
<div class="colname"></div>

CSS

div.base_color {
    width:34px;
    height:34px;
    margin:0 0 0 20px;
    display:inline-block;
    border:1px solid #ececec;
    box-shadow:2px 2px 2px #eeeeee;
}
p {
    margin:20px;
}

JavaScript

$(document).ready(function () {



    /*javascript*/
    var colorlist = {
        "cols": [{
            "realcolor": "blue",
            "hex": "#174f9c"
        }, {
            "realcolor": "red",
            "hex": "#ed3232"
        }, {
            "realcolor": "white",
            "hex": "#ffffff"
        }, {
            "realcolor": "black",
            "hex": "#000000"
        }, {
            "realcolor": "green",
            "hex": "#22a351"
        }, {
            "realcolor": "yellow",
            "hex": "#dce624"
        }, {
            "realcolor": "purple",
            "hex": "#4b1539"
        }, {
            "realcolor": "orange",
            "hex": "#f5b918"
        }, {
            "realcolor": "pink",
            "hex": "#de3166"
        }]
    };


    var listItems = [];
    $.each(colorlist.cols, function (i, vm) {
        listItems.push("<option value='" + colorlist.cols[i].hex + "'>" + colorlist.cols[i].realcolor + "</option>");
    });
    $('#colorlisting').html(listItems);




    $('select#colorlisting').on("change", function () {
        $('.base_color').css('backgroundColor', $(this).find('option:selected').attr('value'));
        $('.colname').html($(this).find('option:selected').text())
        return false;
    });
});