[英]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.