$('selector').prop() 與$('selector').attr()似乎與jQuery Moible有衝突

jquery mobile

peter_pan 2018-06-09 10:08:23 ‧ 6352 瀏覽

分享至

這是我第一次發問，如有不當之處，請大家多多包涵!
我的問題是關於jquery mobile，我在嘗試做一些按鈕與選項的連動，例如按某個A套餐按鈕，就會把所有餐點的主餐、附餐與飲料選起來，但是我用jQuery試了
以下幾個方式:
$('#burger').val(1);
$('#drink').find("option[value=1]").prop("selected",true);
$('#side').find("option[value=1]").attr("selected","selected");

都不成功…
或是說其實後台的值，的確是變成我所設的，但是前台卻紋風不動。

我試著找出問題，發覺可能是jQuery mobile 的css引述檔有問題http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css

也就是如果我不使用css檔，一切都沒問題了，但是如果用了，前台的設定就動不了，可是我一定得使用jquery mobile….請問是否有人知道該如何解決這個問題???

以下例子是我試做點選組合餐，點選ComboA就會預選burger選項內value是1的cheeseburger，drink選項內value是1的Chocolate，slide選項內value是1的Apple pie。ComboB與ComboC依此類推，但卻都不成功….

<!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(){
				$('#combo_a').click(function(){
					$('#burger').val(1);
					$('#drink').find("option[value=1]").prop("selected",true);
					$('#side').find("option[value=1]").attr("selected","selected");					
				});				
				$('#combo_b').click(function(){
					$('#burger').val(2);
					$('#drink').find("option[value=2]").prop("selected",true);
					$('#side').find("option[value=2]").attr("selected",true);					
				});			
				$('#combo_c').click(function(){
					$('#burger').val(3);
					$('#drink').find("option[value=3]").prop("selected","selected");
					$('#side').find("option[value=3]").attr("selected",true);					
				});
			});
		</script>
	</head>
	<body>
		<div data-role='page'>
			<div data-role='header'><h1>TEST</h1></div>
			<div data-role='body'>
				<div data-role='fieldcontain'>
					<fieldset data-role='controlgroup' data-type='horizontal' >
						<legend>Choose the meal</legend>
							<label for='combo_a'>Combo A</label>
							<input type='radio' name='combo' id='combo_a' value='combo_a' >
							<label for='combo_b'>Combo B</label>
							<input type='radio' name='combo' id='combo_b' value='combo_b' >
							<label for='combo_c'>Combo C</label>
							<input type='radio' name='combo' id='combo_c' value='combo_c' >
					</fieldset>
				</div>				
				<fieldset data-role='fieldcontain'>
						<label for='burger'>Choose the burger</label>
						<select id='burger' name='burger' data-native-menu='false'>
							<option value='0'>Choose burger...</option>
							<option value='1'>CheeseBurger</option>
							<option value='2'>Hamburger</option>	
							<option value='3'>FishBurger</option>							
						</select>
				</fieldset>
				<fieldset data-role='fieldcontain'>
						<label for='drink'>Choose the drink</label>
						<select id='drink' name='drink' data-native-menu='false'>
							<option value='0'>Choose drink...</option>
							<option value='1'>Chocolate</option>
							<option value='2'>Coffee</option>
							<option value='3'>Cola</option>							
						</select>
				</fieldset>
				<fieldset data-role='fieldcontain'>
						<label for='side'>Choose the side</label>
						<select id='side' name='side' data-native-menu='false'>
							<option value='0'>Choose side...</option>							
							<option value='1'>Apple Pie</option>
							<option value='2'>Salad</option>	
							<option value='3'>Fries</option>
						</select>
				</fieldset>
			</div>
		</div>
	</body>
</html>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

神Q超人

iT邦研究生 5 級 ‧ 2018-06-09 11:12:05

最佳解答

我試著去看了一下，的確是因為jQuery mobile的css改變了原本的標籤，但是這時候只需要去看他被渲染成什麼樣子，在針對他的變化做顯示就好，例如我們先找到該標籤變成什麼樣子，之後再去觀察我選擇選項的時候html怎麼變化：
選擇前：

選擇後：

可以發現他在選擇某個選項的時候會改變裡面的文字，來做到被選取的感覺，所以只需要再寫一行用改變中文字的程式碼就好，例如把combo_a的click改成以下：

$('#combo_a').click(function(){
    $('#burger').val(1);
    $('#burger-button').html('<span>Hamburger</span>');
    $('#drink').find("option[value=1]").prop("selected",true);
    $('#drink-button').html('<span>Chocolate</span>');
    $('#side').find("option[value=1]").attr("selected","selected");
    $('#side-button').html('<span>Apple Pie</span>');
});

這樣就會被選擇到，而且畫面被選取的選項也會變了！如果有問題可以再留言告知我，謝謝