JSON fed checkbox filtering as Drop Down List

JSON fed checkbox filtering as Drop Down List - Andrew Pougher

HTML

<div id="namefilter"><span>Filter Names</span>
    <div id="names"></div>
</div>


<div id="log"></div><br>
<div id="target"></div>

CSS

body{background:#eee;padding-top:160px}
#names{display: none;width:190px;border:1px solid;padding:4px;margin-top:10px;
    background:#fff;
   -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);}

.sNames{display:block;padding:2px;margin:2px;text-indent:30px}

#namefilter{margin-top:40px;cursor:pointer;
width:190px;
position:absolute;
left:30px;
    top:30px;
}



#namefilter span{background-image: url(http://www.focusdashboard.com/img/sel-arrow.gif), 
  -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: 96% 50%;
  background-repeat: no-repeat;
display: block;
width:190px;
padding:4px}


#namefilter:hover > div {display: block;}
#log {font-size:9px;color:#222222}

.show{color:red}
.hide{display:none}

#target span{margin:12px; padding:12px;
    background-color:#ffffff;
    border:1px solid #dddddd;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;}

label{font-size:12px;text-align:left;position:absolute;text-indent:2px;margin-left:22px}

JavaScript

var selectValues =   {
        "AirStatus": "HELD",
        "AirStatusToolTip": "This is the text that should appear as tooltip over the word HELD",
        "ExternalItinLink": "",
        "Flights": [
            {
                "FlightNumber": "8",
                "FullPNRKey": "1S.X55F.VVVLF",
                "StartDateTime": "2012-09-05 08:40",
                "StartPoint": "LHR",
                "VendorCode": "EK",
                "VendorName": "Emirates Airlines"
            },
            {
                "FlightNumber": "7",
                "FullPNRKey": "1S.X55F.NMRYLF",
                "StartDateTime": "2012-09-10 02:30",
                "StartPoint": "DXB",
                "VendorCode": "EK",
                "VendorName": "Emirates Airlines"
            }
        ],
        "FullPNRKey": "1S.X55F.VVVLF",
        "NavitasAcctNum": null,
        "NumCar": 0,
        "NumFlight": 2,
        "NumHotel": 0,
        "Passengers": [
            {
                "FullName": "POUGHER/ANDREW",
                "FullPNRKey": "1S.X55F.VVVLF"
            },
            {
                "FullName": "ROYSTEN/DREW",
                "FullPNRKey": "1S.X55F.VVVLF"
            },
            {
                "FullName": "WALKER/MICHELE",
                "FullPNRKey": "1S.X55F.VVVLF"
            }
        ],
        "RecordLocator": "NMRYLF",
        "Routing": "LHR-DXB-LHR",
        "RoutingDecoded": "LHR-Heathrow,London (GB)DXB-Dubai Intl Arpt,Dubai (AE) LHR-Heathrow,London (GB)",
        "TripEndDate": "Monday, September 10, 2012",
        "TripStartDate": "Wednesday, September 05, 2012",
        "WaitlistExists": false
    }

        // populate ddl
$.each(selectValues.Passengers, function(key, value) {   
$('div#names')
.append($("<input></input>")
.attr({"type":'checkbox', 'name': value.FullName, 'value': value.FullName, 'class': 'sNames', 'text' : value.FullName}).before("<label>" + value.FullName + "</label>")
 );
});

        // populate...