Jquery Mobile Select

Demo to show Select Options not being populated

by Andy Donegan

HTML

<!-- Heating Controls & Settings Page -->
<div id="heating" data-role="page">
    <div data-role="content">
        <div class="ui-field-contain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Switch1:</legend>
                <select name="mon_hour_timer_one" id="mon_hour_timer_one" data-mini="true"></select>
                <select name="mon_min_timer_one" id="mon_min_timer_one" data-mini="true"></select>
                <select name="mon_temp_range_one" id="mon_temp_range_one" data-mini="true"></select>
            </fieldset>
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Switch2:</legend>
                <select name="mon_hour_timer_two" id="mon_hour_timer_two" data-mini="true"></select>
                <select name="mon_min_timer_two" id="mon_min_timer_two" data-mini="true"></select>
                <select name="mon_temp_range_two" id="mon_temp_range_two" data-mini="true"></select>
            </fieldset>
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Switch3:</legend>
                <select name="mon_hour_timer_three" id="mon_hour_timer_three" data-mini="true"></select>
                <select name="mon_min_timer_three" id="mon_min_timer_three" data-mini="true"></select>
                <select name="mon_temp_range_three" id="mon_temp_range_three" data-mini="true"></select>
            </fieldset>
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Switch4:</legend>
                <select name="mon_hour_timer_four" id="mon_hour_timer_four" data-mini="true"></select>
                <select name="mon_min_timer_four" id="mon_min_timer_four" data-mini="true"></select>
                <select name="mon_temp_range_four" id="mon_temp_range_four" data-mini="true"></select>
            </fieldset>
            <fieldset data-role="controlgroup" data-type="horizontal">
         ...

JavaScript

// Data Setup for Heater Controls

var hour_data = [{ "optionId": 0, "optionValue": "00" }, { "optionId": 1, "optionValue": "01" }, { "optionId": 2, "optionValue": "02" },
    { "optionId": 3, "optionValue": "03" }, { "optionId": 4, "optionValue": "04" }, { "optionId": 5, "optionValue": "05" },
    { "optionId": 6, "optionValue": "06" }, { "optionId": 7, "optionValue": "07" }, { "optionId": 8, "optionValue": "08" },
    { "optionId": 9, "optionValue": "09" }, { "optionId": 10, "optionValue": "10" }, { "optionId": 11, "optionValue": "11" },
    { "optionId": 12, "optionValue": "12" }, { "optionId": 13, "optionValue": "13" }, { "optionId": 14, "optionValue": "14" },
    { "optionId": 15, "optionValue": "15" }, { "optionId": 16, "optionValue": "16" }, { "optionId": 17, "optionValue": "17" },
    { "optionId": 18, "optionValue": "18" }, { "optionId": 19, "optionValue": "19" }, { "optionId": 20, "optionValue": "21" },
    { "optionId": 22, "optionValue": "22" }, { "optionId": 23, "optionValue": "23" }];

var min_data = [{ "optionId": 0, "optionValue": "00" }, { "optionId": 1, "optionValue": "05" }, { "optionId": 2, "optionValue": "10" },
    { "optionId": 3, "optionValue": "15" }, { "optionId": 4, "optionValue": "20" }, { "optionId": 5, "optionValue": "25" },
    { "optionId": 6, "optionValue": "30" }, { "optionId": 7, "optionValue": "35" }, { "optionId": 8, "optionValue": "40" },
    { "optionId": 9, "optionValue": "45" }, { "optionId": 10, "optionValue": "50" }, { "optionId": 11, "optionValue": "55" }];

var temp_data = [{ "optionId": 0, "optionValue": "0°c" }, { "optionId": 1, "optionValue": "1°c" }, { "optionId": 2, "optionValue": "2°c" },
    { "optionId": 3, "optionValue": "3°c" }, { "optionId": 4, "optionValue": "4°c" }, { "optionId": 5, "optionValue": "5°c" },
    { "optionId": 6, "optionValue": "6°c" }, { "optionId": 7, "optionValue": "7°c" }, { "optionId": 8, "optionValue": "8°c" },
    { "optionId": 9, "optionValue": "9°c" }, { "optionId": 10,...