我尝试用jquery选择我的选择框的bird
。但无论我做什么,它都会cat
:
$(function () {
$(".select2").select2();
$(".select2").val('bird');
$('.select2').find('option[value="bird"]').prop('selected', true);
});
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="form-group">
<select class=" form-control select2" style="width: 100%;">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
</div>
答案 0 :(得分:2)
您需要在设置值后触发change
事件,如下所示:
$(function () {
$(".select2").select2();
$(".select2").val('bird').trigger("change");
});
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="form-group">
<select class=" form-control select2" style="width: 100%;">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
</div>
答案 1 :(得分:1)
$(function () {
$(".select2").select2();
$(".select2").val('bird');
$('.select2').find('option[value="bird"]').prop('selected', true).change();
});
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="form-group">
<select class=" form-control select2" style="width: 100%;">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
</div>
答案 2 :(得分:0)
Select2会尊重您的初始selected
属性。我不确定这是否适用于您的情况,但它可能是最具语义性的解决方案。
$(function () {
$(".select2").select2();
});
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="form-group">
<select class=" form-control select2" style="width: 100%;">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option selected value="bird">Bird</option>
</select>
</div>