如何处理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中动态选择菜单的事件？

回答

相关问题