1

こんにちは私はJavaScriptプログラミングに不慣れです。jquerymobileでドロップダウンリストビュー（ピッカービュー）を作成しています。データをそのピッカービューに配置するために、json配列を作成しました。問題は、特定のリストビューをクリックしたときに、json配列からデータを取得してピッカー（リスト）ビューに配置するjs関数を実行するためのコードが必要なことです。私のHTMLコードは次のとおりです。

<form method="get" name="datarange">
  <div data-role="fieldcontain">
     <select id="number" name="day you need" onclick="dayLoad();">
       <option value="select-value" selected="selected" >--Select Day--</option>
       <option value="01">/* here i want my data from array "day"/*</option>
       <option value="02">/* here i want my data from array "day"/*</option>
     </select>
  </div>
  <div data-role="fieldcontain">
     <select id="time" name="time you need">
       <option value="select-value" selected="selected">--Select Time--</option>
       <option value="101">/* here i want my data from array "Time" /*</option>
       <option value="102">/* here i want my data from array "Time"/*</option>
       <option value="103">/* here i want my data from array "Time"/*</option>
       <!--  etc. -->
       <option value="116">/* here i want my data from array "Time"/*</option>
     </select>
  </div>
  <div data-role="fieldcontain">
     <select id="pid" name="pid you need">
       <option value="select-value" selected="selected">--No PID allocation found--</option>
       <option value="301">/* here i want my data from array "pid"/*</option>
       <option value="302">/* here i want my data from array "pid"/*</option>
     </select>
  </div>
  <div data-role="fieldcontain">
     <select id="jus" name="justification you need">
       <option value="select-value" selected="selected">--Select Justification--</option>
       <option value="201">Project Work</option>
       <option value="202">Client Call</option>
       <option value="203">Team Meeting<option>
       <option value="204">Others</option>
     </select>
  </div>
</form>
<div id="display" class="rss-box"></div>

私のjsファイル：

var day=[
       {"dayTime" : "Today-Drop"},
       {"dayTime" : "Tomorrow-Pick up"}];  
var time=[
        {"PM" : "3:00 PM"},
        {"PM" : "4:00 PM"},
        {"PM" : "7:30 PM"},
        {"PM" : "9:00 PM"},
        {"PM" : "10:15 PM"},
        {"PM" : "11:00 PM"}];

var Pid=[
        {"pidno" : "7813"},
        {"pidno" : "8133"},];


function dayLoad(){//i need the code to put in this function which grabs the data from array and gonna put into the listview}
4

3 に答える 3

0

他のいくつかの回答で説明されているように正しく挿入している場合でも、jquery mobile スタイルシートに従ってレンダリングするように jquery mobile が dom を変更していない可能性があります。これは、ページがロードされたときに jquery mobile がこの種の変換のみを行うために発生します。

ただし、jquery mobile は、javascript 関数によって dom に挿入されたコンテンツを変更する方法を提供します。このメソッドは、trigger('create') です。$ で dom に挿入された要素を選択し、次の方法でトリガーを呼び出す必要があります。

$("css selector for the element").trigger('create')

デイ ドロップボックスに適用すると、次のようになります。

$("#number").trigger('create')
于 2012-07-16T07:32:26.237 に答える
0

データを繰り返し処理するだけです.json（JavaScript Object Notation）はjavascriptです：

function dayLoad() {
    for (var key in day) {
        $('#number').append($("<option/>", {
            value: key,
            text: day[key].dayTime
        }));
    }
}

またはjQuery流暢なスタイルで：

function dayLoad() {    
    $.each(day, function (key, value) {
        $('#number')
            .append($("<option></option>")
            .attr("value", key)
            .text(value.dayTime));
    });
}

onclick イベントを使用している理由がわかりませんでした。おそらくjquery ready methodを参照してください。初期化は次のようになります。

$(document).ready(function () {        
            dayLoad();        
    });

[UPDATE @Calavoow コメントを参照] モバイル用 $(document).ready() ではなく $(document).bind('pageinit')

于 2012-07-16T08:06:10.400 に答える
0

何かのようなもの：

function appendNodes( target, data, key ) {
    var div = document.getElementById(target);
    for (var i = 0; i < data.length; i++ ) {
        var option = document.createElement("option");
        option.appendChild( document.createTextNode(data[i][key]) )
        option.value = i;
        div.appendChild(option);
    }
}

function dayLoad(){
    appendNodes( "number", day, "dayTime" );
    appendNodes( "time", time, "PM" );
    appendNodes( "pid", Pid, "pidno" );
}
于 2012-07-16T07:37:54.043 に答える