Jquery Mobile - предварительное заполнение списка выбора данными
В настоящее время я пытаюсь создать базовую функцию таймера нагрева. У меня шесть переключателей в день с часами, минутами и температурой. Мои знания очень ограничены, и я много хакую и обманываю вещи с этого сайта, чтобы помочь мне двигаться вперед.
Самый простой способ для меня создать что-то с моими ограниченными знаниями в области программирования - это использовать Jquery Mobile Select Widget.
Я создал все это с помощью HTML успешно, но мой код был огромен, с 24 часами в день, минуты с 5-минутными интервалами, давая 12-минутные варианты и 35 вариантов температурного диапазона.
Как только у меня все заработало, я искал способы уменьшить размер кода и повторить его с помощью JavaScript.
Я нашел этот http://jsfiddle.net/qsafmw5g/1/ который был превосходным и помог мне понять, как загружать данные несколько раз.
var data = [{"chapterId":1,"chapterName":"First"},{"chapterId":2,"chapterName":"Second"}];
$(data).each(function() {
var option = $('<option />');
option.attr('value', this.chapterId ).text(this.chapterName );
$('#comboChapters').append(option);
});
$('#comboChapters').selectmenu('refresh', true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="comboChapters" id="comboChapters" data-native-menu="false">
</select>С тех пор я создал свой собственный код из этого (все еще грубого), но теперь мое программное обеспечение загружает только значения в последний переключатель (номер 6) и оставляет остальные пять переключателей пустыми.
Я попытался уменьшить свой код, чтобы просто показать понедельник банк из шести коммутаторов и удалить другие мои вещи.
JSFiddle Здесь https://jsfiddle.net/adonegan/3yx2p7rf/
// 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,
"optionValue": "10°c"
}, {
"optionId": 11,
"optionValue": "11°c"
}, {
"optionId": 12,
"optionValue": "12°c"
}, {
"optionId": 13,
"optionValue": "13°c"
}, {
"optionId": 14,
"optionValue": "14°c"
}, {
"optionId": 15,
"optionValue": "15°c"
}, {
"optionId": 16,
"optionValue": "16°c"
}, {
"optionId": 17,
"optionValue": "17°c"
}, {
"optionId": 18,
"optionValue": "18°c"
}, {
"optionId": 19,
"optionValue": "19°c"
}, {
"optionId": 20,
"optionValue": "21°c"
}, {
"optionId": 22,
"optionValue": "22°c"
}, {
"optionId": 23,
"optionValue": "23°c"
}];
$(hour_data).each(function() {
var option = $('<option />');
option.attr('value', this.optionId).text(this.optionValue),
$('#mon_hour_timer_one').append(option);
$('#mon_hour_timer_two').append(option);
$('#mon_hour_timer_three').append(option);
$('#mon_hour_timer_four').append(option);
$('#mon_hour_timer_five').append(option);
$('#mon_hour_timer_six').append(option);
});
$(min_data).each(function() {
var option = $('<option />');
option.attr('value', this.optionId).text(this.optionValue);
$('#mon_min_timer_one').append(option);
$('#mon_min_timer_two').append(option);
$('#mon_min_timer_three').append(option);
$('#mon_min_timer_four').append(option);
$('#mon_min_timer_five').append(option);
$('#mon_min_timer_six').append(option);
});
$(temp_data).each(function() {
var option = $('<option />');
option.attr('value', this.optionId).text(this.optionValue);
$('#mon_temp_range_one').append(option);
$('#mon_temp_range_two').append(option);
$('#mon_temp_range_three').append(option);
$('#mon_temp_range_four').append(option);
$('#mon_temp_range_five').append(option);
$('#mon_temp_range_six').append(option);
});
$('#mon_hour_timer_one').selectmenu('refresh', true);
$('#mon_hour_timer_two').selectmenu('refresh', true);
$('#mon_hour_timer_three').selectmenu('refresh', true);
$('#mon_hour_timer_four').selectmenu('refresh', true);
$('#mon_hour_timer_five').selectmenu('refresh', true);
$('#mon_hour_timer_six').selectmenu('refresh', true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- 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">
<legend>Switch5:</legend>
<select name="mon_hour_timer_five" id="mon_hour_timer_five" data-mini="true"></select>
<select name="mon_min_timer_five" id="mon_min_timer_five" data-mini="true"></select>
<select name="mon_temp_range_five" id="mon_temp_range_five" data-mini="true"></select>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Switch6:</legend>
<select name="mon_hour_timer_six" id="mon_hour_timer_six" data-mini="true"></select>
<select name="mon_min_timer_six" id="mon_min_timer_six" data-mini="true"></select>
<select name="mon_temp_range_six" id="mon_temp_range_six" data-mini="true"></select>
</fieldset>
</div>
</div>
</div>Я поиграл с первым jsfiddle и понял, что это также не позволит мне загрузить несколько вариантов выбора из этой одной функции.
Будет ли кто-нибудь достаточно любезен, чтобы помочь мне показать, как можно заставить мою функцию работать, чтобы заполнить все мои списки.
1 ответ
Решение
Добро пожаловать в динамическое создание страницы! Как видите, когда вам нужно что-то повторить в своем коде, вы знаете, что это можно сделать другим способом. Вот мой:
HTML
<div id="heating" data-role="page">
<div data-role="content">
<div class="ui-field-contain" id="content">
</div>
</div>
</div>
JavaScript
$(document).on("pageinit", "#heating", function(event)
{
var switch_number = 6;
var html = "";
for (var s = 0; s != switch_number; s++)
{
html += '<fieldset data-role="controlgroup" data-type="horizontal">';
html += '<legend>Switch ' + s + ':</legend>';
html += '<select id="mon_hour_timer_' + s + '" data-mini="true">';
for (var h = 0; h != 24; h++)
html += '<option value="' + h + '">' + h + '</option>';
html += '</select>';
html += '<select id="mon_min_timer_' + s + '" data-mini="true">';
for (var m = 0; m != 60; m += 5)
html += '<option value="' + m + '">' + m + '</option>';
html += '</select>';
html += '<select id="mon_temp_range_' + s + '" data-mini="true">';
for (var t = 0; t != 24; t++)
html += '<option value="' + t + '">' + t + ' ° C</option>';
html += '</select>';
html += '</fieldset>';
}
$("#content").html(html);
$("#content").trigger("create");
});