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

Posted 2023-05-09

【中文标题】Jquery Mobile - 使用数据预填充选择列表

【英文标题】：Jquery Mobile - Pre populating Select List with Data

【发布时间】：2015-06-16 03:24:55

【问题描述】：

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

以我有限的编程知识创建东西的最基本方法是使用 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 并意识到这也不允许我从那个函数加载多个选择。

是否有人好心帮助我展示如何使我的函数工作以填充我的所有列表。

【问题讨论】：

我应该指出我正在使用 Jquery Mobile 1.4.5 和 Jquery 2.1.3。但是 JsFiddles 在我必须选择的版本中复制了错误。

【参考方案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 + ' &deg; C</option>';

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

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

【讨论】：

Sga 非常感谢你，这远远超出了我的预期。您的代码对我来说非常清晰，非常感谢，因为我可以继续尝试将值输出到警报。我最终想继续使用类似于您的代码的内容，但是我发现一些答案的小步骤已经超出了我的想象，以至于我已经设法实现但无法修改，因此我还没有真正学到任何东西。再次感谢您的宝贵时间。

@AndyDonegan 你附加了相同的元素，而不是你应该.clone()它jsfiddle.net/3yx2p7rf/2

@Ciccolina，非常感谢你知道这也很有用。我刚刚很快完成了你的小提琴，因为它正在将所有值克隆到 Hour 值。 jsfiddle.net/adonegan/a0amsjeu

基于 Sga 的代码，我现在设法修改了数据输出，这大大减少了我的代码大小。这里：-jsfiddle.net/adonegan/vu7zLrz9我知道这不是教科书，但我在这次练习中学到了很多东西。