如何處理jquery mobile中動態選擇菜單的事件？

我正在使用Jquery mobile製作動態選擇菜單。我面臨的第一個問題是佔位符沒有出現這兩個靜態創建的選項「 - 選擇日 - 」和「 - 選擇時間 - 」，我已經在html文件中靜態創建。它只是加載動態創建的值。第二個問題，重要的是如果用戶選擇「Today-Drop」，我想載入「PMtime」，如果用戶選擇「Tomorrow-Pick up」選項，則載入「AMtime」。我爲它創建了一個事件處理程序，但它似乎不工作。請幫助.... HTML代碼：如何處理jquery mobile中動態選擇菜單的事件？

<body onload="init();"> 
<form method="get" name="datarange"> 
<div data-role="fieldcontain"> 

    <select id="select-choice-1" name="select-choice-1" class="target" > 
     <option data-placeholder="true">--Select Day--</option> 

    </select> 
    </div> 
<div data-role="fieldcontain"> 
<select id="select-choice-2" name="select-choice-2" > 
    <option data-placeholder="true">--Select Time--</option> 

</select> 
    <script> 
     $('.target').change(function(){ 
          var str=""; 
          $("select option:selected".each(function(){ 
                  str+=$(this).text() + ""; 
                  }); 
           if(str.text=="Today-Drop") 
           { 
           check=0; 
           } 
           else 
           { 
           check=1; 
           } 
          Load_selected_time(check); 

          }) 
          .trigger('change'); 

    </script> 
    </div>

在我的JS文件

var check=0; 
var day=[ 
    {name : "Today-Drop",id: "drop"}, 
    {name : "Tomorrow-Pick up",id: "pickup"}]; 
var PMtime=[ 
     {name : "3:00 PM", id: "3"}, 
     {name : "4:00 PM", id: "4"}, 
     {name : "7:30 PM", id: "730"}, 
     {name : "9:00 PM", id: "9"}, 
     {name : "10:15 PM",id: "1015"}, 
     {name : "11:00 PM",id: "11"}]; 
var AMtime=[ 
     {name : "12:00 AM", id: "12"}, 
     {name : "1:00 AM" ,id: "1"}, 
     {name : "2:00 AM" ,id: "2"}, 
     {name : "3:00 AM" ,id: "3am"}, 
     {name : "4:00 AM" ,id: "4"}, 
     {name : "5:00 AM" ,id: "5"}, 
     {name : "6:00 AM" ,id: "6"}, 
     {name : "7:00 AM" ,id: "7"}, 
     {name : "8:00 AM" ,id: "4"}, 
     {name : "9:00 AM" ,id: "5"}]; 

function init(){ 
       Load_selected();} 
function Load_selected() { 

var arraytoload = day; 
var optionlist = ''; 
var i = 0; 

$.each(arraytoload, function (index,item) { 
     if (i == 0) { 
     optionlist += '<option selected="' + item.id + '">' + item.name + '</option>'; 
     } 
     else { 
     optionlist += '<option value="' + item.id + '">' + item.name + '</option>'; 
     } 
     i++; 
     }) 
optionlist += ''; 
$("#select-choice-1").html(optionlist).selectmenu('refresh', true); 
} 

function Load_selected_time(check){ 
if(check==0){ 
    var arraytoload = PMtime;} 
else{ 
    var arraytoload = AMtime; 
} 
var optionlist = ''; 
var i = 0; 

$.each(arraytoload, function (index,item) { 
     if (i == 0) { 
     optionlist += '<option selected="' + item.id + '">' + item.name + '</option>'; 
     } 
     else { 
     optionlist += '<option value="' + item.id + '">' + item.name + '</option>'; 
     } 
     i++; 
     }) 
optionlist += ''; 
$("#select-choice-2").html(optionlist).selectmenu('refresh', true); 
}

來源

2012-07-19 priyankirk

你的第一個問題（佔位符不顯示）發生，因爲你覆蓋了兩者的內容。

嘗試在「每個」循環添加項目到字符串之前

var optionslist = $('yourselect').html();

初始化兩種功能的「optionslist」字符串。

來源

2012-07-19 07:45:30

謝謝..它的工作 – priyankirk 2012-07-19 08:48:21

使用.on()

$('.target').on('change',function(){ 

    // your code here. 

});

來源

2012-07-19 07:41:36 root

如何處理jquery mobile中動態選擇菜單的事件？

回答

相關問題