Jquery mobile Jquery Mobile-使用数据预填充选择列表

我目前正在尝试创建一个基本的加热定时器功能。我每天有六个开关，分别是小时、分钟和温度。我的知识非常有限，我在这个网站上做了很多黑客和捏造的事情来帮助我前进

对于我来说，用有限的编程知识创建一些东西的最基本方法是使用jquerymobileselect小部件

我通过html成功地创建了它，但我的代码非常庞大，一天24小时，每5分钟一分钟，提供12分钟的选项，35个温度范围选项

一旦我让它工作起来，我就四处寻找减少代码大小并通过JavaScript重复的方法

我发现这非常好，帮助我认识到如何多次加载数据

var data=[{chapterId:1，chapterName:First}，{chapterId:2，chapterName:Second}]； $data.eachfunction{ var选项=$； option.attr'value'，this.chapterId.textthis.chapterName； $'comboChapters'.appendoption； }; $'comboChapters'。选择菜单'refresh'，true；

---

欢迎使用动态页面创建！ 正如您所看到的，当您必须在代码中重复某些内容时，您知道可以用另一种方式来完成。这是我的：

HTML

JavaScript

---

我应该指出，我使用的是jQueryMobile 1.4.5和jQuery2.1.3。但是JsFiddles在我不得不选择的版本中复制了这个错误。非常感谢，这比我期望的要多。您的代码对我来说非常清楚，我非常感激，因为我可以继续尝试将值输出到警报。我最终想继续学习你的代码，但我发现一些答案时，我的头脑中已经出现了一些小步骤，我已经设法实现了，但无法修改，所以我没有真正学到任何东西。再次非常感谢您的时间。@AndyDonegan您正在添加相同的元素，您应该这样做。克隆它@Ciccolina，非常感谢您知道这一点也很有用。我很快就完成了你的小提琴，因为它正在将所有的值克隆到小时值上。基于Sga的代码，我现在已经设法修改了数据输出，这大大减少了我的代码大小。这里：-我知道这不是课本，但我在这个练习中学到了很多。

<div id="heating" data-role="page">
  <div data-role="content">
    <div class="ui-field-contain" id="content">
    </div>
  </div>
</div>

$(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 + ' &deg; C</option>';

        html += '</select>';
        html += '</fieldset>';
    }

    $("#content").html(html);
    $("#content").trigger("create");
});