RSS   



  可打印版本 | 推薦給朋友 | 訂閱主題 | 收藏主題 | 純文字版  


 


 
主題: [javascript] [求助]問JQuery mobile的下拉問題   字型大小:||| 
ROACH
版主
等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30
減肥中!請勿餵食

十週年紀念徽章(四級)  

 . 積分: 14486
 . 精華: 14
 . 文章: 11391
 . 收花: 134740 支
 . 送花: 5780 支
 . 比例: 0.04
 . 在線: 8489 小時
 . 瀏覽: 79056 頁
 . 註冊: 5678
 . 失蹤: 0
 . 鄉下地方
#1 : 2017-12-5 02:58 PM     只看本作者 引言回覆

問一個Jquery mobile的下拉選項兩階的問題
最近在學jquery mobile
發現一個奇怪的問題
當用一般的jquery 執行(把jquery.mobile-1.4.5.min.js拿掉) 很正常
當選擇 {甲班} 第二個下拉會帶出{請選擇, 甲班-小明,甲班-小英}這三個選項
當選擇 {乙班} 第二個下拉會帶出{乙班-小英}這個選項

正常應該是帶出這個


如果把jquery.mobile-1.4.5.min.js加回去用jquery mobile的方式
但實際變成這樣
沒有帶出來


點選後看起來有勾選
原先的是沒蓋過去嗎 還是哪邊需要改寫呢


Google的一下說可以用

$("select[name='sq2']").selectmenu('refresh');
但卻會造成第二個選項變成空白挑選不到

測試的程式碼

<!doctype html>
<html>
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
     <Script>
          function fto(x)
          {
           $("select[name='sq2'] option").remove();
             if ( x == "01")
              {
                $("select[name='sq2']").append("<option value='' >請選擇</option>");       
                $("select[name='sq2']").append("<option value='A' >甲班-小明</option>");       
                $("select[name='sq2']").append("<option value='B' >甲班-小英</option>");       
              }
           else if ( x == "02")
               $("select[name='sq2']").append("<option value='D' >乙班-小英</option>");
         }
    </Script>
  </head>
  
<body>

<div data-role="page" id='pagetop'>
     <div data-role="header" data-position="fixed" data-theme="b">
               <h2>測試</h2>
    </div>       
      <div data-role="content">

<label for="s1">班級:</label>
      <select name=sq1 size=1 onchange=fto(this.value) data-ajax="false" >
            <option value=''>請選擇</option>
            <option value='01'>甲班</option>
            <option value='02'>乙班</option>
       </select>
           <BR>
<label for="s2">姓名:</label>
      <select name=sq2 size=1 data-ajax="false">
         <option value=''>請選擇</option>
       </select>   

      </div>
       
   </div>          
</body>
</html>
[ROACH 在  2017-12-5 05:43 PM 作了最後編輯]


 附件: 您所在的用戶組無法下載或查看附件


[如果你喜歡本文章,就按本文章之鮮花~送花給作者吧,你的支持就是別人的動力來源]
本文連接  
檢閱個人資料  訪問主頁  發私人訊息  Blog  快速回覆 新增/修改 爬文標記
GERRYccc
名譽版主
等級: 8等級: 8
凹~~嗚~~^^y

今日心情

 . 積分: 101
 . 文章: 593
 . 收花: 479 支
 . 送花: 746 支
 . 比例: 1.56
 . 在線: 441 小時
 . 瀏覽: 7051 頁
 . 註冊: 5679
 . 失蹤: 5
 . ~@.@~ TWed2k 星球
#2 : 2017-12-10 10:58 PM     只看本作者 引言回覆

在 fto 最後面插入以下代碼就可以在sq2異動後觸發 change 事件,
因為 jquery mobile 會綁定 change 事件去切換顯示的 span



function fto(x){
    //...略
    else if ( x == "02"){
        $("select[name='sq2']").append("<option value='D' >乙班-小英</option>");
    }
    $("select[name='sq2']").change();
}
或是還原為初始值...

function fto(x){
    //...略
    else if ( x == "02"){
        $("select[name='sq2']").append("<option value='' >請選擇</option>");
        $("select[name='sq2']").append("<option value='D' >乙班-小英</option>");
    }
    $("select[name='sq2']").val('').change();
}
[GERRYccc 在  2017-12-10 11:03 PM 作了最後編輯]



[如果你喜歡本文章,就按本文章之鮮花~送花給作者吧,你的支持就是別人的動力來源]
本文連接  
檢閱個人資料  發私人訊息  Blog  快速回覆 新增/修改 爬文標記
ROACH
版主
等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30
減肥中!請勿餵食

十週年紀念徽章(四級)  

 . 積分: 14486
 . 精華: 14
 . 文章: 11391
 . 收花: 134740 支
 . 送花: 5780 支
 . 比例: 0.04
 . 在線: 8489 小時
 . 瀏覽: 79056 頁
 . 註冊: 5678
 . 失蹤: 0
 . 鄉下地方
#3 : 2017-12-10 11:53 PM     只看本作者 引言回覆

原來還有這種方式
GERRYccc太感動了

原先我還想到另外一種方式

  $("select[name='sq2']").prev().text("val");
類似這樣把span內容給取代掉
後來發現選別的選項後 原先span卻不會改變了..Google的半天還不知道要用change();



[如果你喜歡本文章,就按本文章之鮮花~送花給作者吧,你的支持就是別人的動力來源]
本文連接  
檢閱個人資料  訪問主頁  發私人訊息  Blog  快速回覆 新增/修改 爬文標記
   

快速回覆
表情符號

更多 Smilies

字型大小 : |||      [完成後可按 Ctrl+Enter 發佈]        

溫馨提示:本區開放遊客瀏覽。
選項:
關閉 URL 識別    關閉 表情符號    關閉 Discuz! 代碼    使用個人簽名    接收新回覆信件通知
發表時自動複製內容   [立即複製] (IE only)


 



所在時區為 GMT+8, 現在時間是 2017-12-16 07:38 AM
清除 Cookies - 連絡我們 - TWed2k © 2001-2046 - 純文字版 - 說明
Discuz! 0.1 | Processed in 0.022313 second(s), 7 queries , Qzip disabled