Board logo

主題: [javascript] [求助]問JQuery mobile的下拉問題 [打印本頁]

發表人: ROACH    時間: 2017-12-5 02:58 PM     主題: [求助]問JQuery mobile的下拉問題

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

正常應該是帶出這個


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


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


Google的一下說可以用

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

測試的程式碼

CODE:
[Copy to clipboard]
<!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 作了最後編輯]

附件: jqsel.htm (2017-12-5 02:58 PM, 1.57 K) / 該附件被下載次數 1
http://twed2k.org/attachment.php?aid=48662
發表人: GERRYccc    時間: 2017-12-10 10:58 PM

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



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

CODE:
[Copy to clipboard]
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 作了最後編輯]
發表人: ROACH    時間: 2017-12-10 11:53 PM

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

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

CODE:
[Copy to clipboard]
  $("select[name='sq2']").prev().text("val");
類似這樣把span內容給取代掉
後來發現選別的選項後 原先span卻不會改變了..Google的半天還不知道要用change();
發表人: GERRYccc    時間: 2017-12-19 02:42 PM

  小經驗交流交流




歡迎光臨 TWed2k (http://twed2k.org/) Powered by Discuz! 4.1.0