問一個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 作了最後編輯]