Как предварительно выбрать элемент списка <select> в Bootstrap с помощью jQuery
У меня есть следующая разметка начальной загрузки и сценарий jQuery, и мой элемент списка выбора не выбирается заранее:
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="serviceType">Service Type</label>
<div class="col-md-1">
<select id="serviceType" name="serviceType" class="form-control">
<option value="S">S</option>
<option value="T">T</option>
<option value="X">X</option>
</select>
<script>
//$('[name=serviceType]').val( T ); // not working
//$('#serviceType').val( T ); // not working
//$('[name=serviceType]').val( "T" ); // not working
$('#serviceType').val( "T" ); // not working
</script>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Кто-нибудь может увидеть, что не так с jQuery? Благодарю.
Приложение № 1: Моя ссылка на библиотеку jQuery CDN находится прямо перед закрывающим тегом, тогда как этот контейнер и javascript выше в веб-документе. Это имеет значение?
Приложение № 2: Добавлена библиотека jQuery CDN для полного просмотра.
3 ответа
Решение
Ты можешь попробовать это
$(document).ready(function () {
$('select option[value="T"]').attr("selected",true); });
Вам нужно вызвать этот код при загрузке страницы. Вы должны использовать $( '#serviceType').val('T')
Пожалуйста, проверьте код ниже
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="serviceType">Service Type</label>
<div class="col-md-1">
<select id="serviceType" name="serviceType" class="form-control">
<option value="S">S</option>
<option value="T">T</option>
<option value="X">X</option>
</select>
<script>
$(function() {
$( '#serviceType' ).val('T');
});
</script>
</div>
</div>
Не забудьте включить файл jQuery.