主題: [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的一下說可以用
$("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 作了最後編輯]
附件:
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
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 作了最後編輯]
發表人:
ROACH 時間: 2017-12-10 11:53 PM
原來還有這種方式
GERRYccc太感動了
原先我還想到另外一種方式
$("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 |