0

Jquery モバイルを使用して動的選択メニューを作成しています。私が直面している最初の問題は、静的に作成されたオプション「--select day--」と「--select time--」の両方にプレースホルダーが表示されないことです。これは、html ファイルで静的に作成しました。動的に作成された値をロードしているだけです。2番目の問題と重要な問題は、ユーザーが「Today-Drop」を選択した場合は「PMtime」をロードし、ユーザーが「Tomorrow-Pick up」オプションを選択した場合は「AMtime」をロードすることです。そのためのイベント ハンドラーを作成しましたが、機能していないようです。助けてください.... HTML コード:

<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);
}
4

2 に答える 2

1

使用する.on()

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

  // your code here.

});
于 2012-07-19T07:41:36.773 に答える
0

両方のコンテンツを上書きしているため、最初の問題 (プレースホルダーが表示されない) が発生します。

両方の関数で「optionslist」文字列を初期化してみてください

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

「each」ループでその文字列にアイテムを追加する前。

于 2012-07-19T07:45:30.917 に答える