[英]set option of select tag using jquery mobile
的HTML
<table>
<tr>
<td style="align-content: center">
<select id="start-lunch-hour" data-native-menu="false" data-overlay-theme="d" data-theme="b" name="start-time-hour" tabindex="-1" data-inline="true" data-icon="false">
<option value="13">--</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12" selected="selected">12</option>
</select>
</td>
<td style="align-content: center">
<fieldset data-role="controlgroup" data-type="horizontal">
<select id="start-lunch-minute-digit1" data-native-menu="false" data-overlay-theme="d" data-theme="b" name="start-time-minute-digit1" tabindex="-1" data-scroll="true" data-inline="true" data-icon="false">
<option value="13">--</option>
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="start-lunch-minute-digit2" data-native-menu="false" data-overlay-theme="d" data-theme="b" name="start-time-minute-digit2" tabindex="-1" data-scroll="true" data-inline="true" data-icon="false">
<option value="13">--</option>
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</fieldset>
</td>
</tr>
</table>
jQuery的
$(function () {
$("#start-time-hour").change(function () {
var data = $(this).find(":selected").val();
//alert(data);
if (data == 13) {
// This field will be output.
if ($("#start-time-minute-digit1").find(":selected").val() != 13) {
$("#start-time-minute-digit1").val(13).prop('selected', true);
}
if ($("#start-time-minute-digit2").find(":selected").val() != 13) {
$("#start-time-minute-digit2").val(13).prop('selected', true);
}
//alert($("#start-time-minute-digit1").find(":selected").val());
//alert($("#start-time-minute-digit2").find(":selected").val());
}
else {
// This is normal digit input value selection for time from dropdown.
}
});
});
那里有三個選擇(值屬性與顯示的文本相同)開始時間-小時選項-,0,1,2 ..... 9個開始時間-分鍾數字1選項-,0,1,.. .5開始時間分鍾數字2選項-,0,1,2 ..... 9
將它們中的任何一個更改為“-”選項時,其他兩個必須更改為“-”。 我寫了上面的函數。 調試顯示值已更改,但頁面上的顯示文本未更新。 在.net C#mvc3中使用jQuery mobile。
這就足夠了:
if (data == 13) {
$("#start-time-minute-digit1, #start-time-minute-digit2").val(13);
}
您的選擇器錯誤,因為“#”應為:
$('#start-lunch-hour')
要么:
$('select[name=start-time-hour]')
只需將您的ID的start-time-minute-digit1
為start-lunch-minute-digit1
,將start-time-minute-digit2
為start-lunch-minute-digit2
並將start-time-hour
更改為start-lunch-hour
好吧,你可以這樣做:
function setSelectedOption(selectID, valueToSelect){
$("#" + selectID + " option[value='" + valueToSelect + "']").attr('selected', 'selected');
$("#" + selectID).selectmenu('refresh');
}
$("#start-lunch-hour").change(function () {
var data = $(this).val();
if (data == 13) {
setSelectedOption("start-lunch-minute-digit1",13);
setSelectedOption("start-lunch-minute-digit2",13);
}
});
在這里工作的小提琴: http : //jsfiddle.net/REthD/25/
希望對您有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.