如何使用jquery选择select2选择框的选项？

问题描述：

我尝试用jquery选择我的selectbox的bird。但它一直是cat，无论我做什么：如何使用jquery选择select2选择框的选项？

$(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>

试$（ '选择2 '）。找到（' 选项[值= “鸟”] '）。支撑（' 选择'，真）.change（） –

答

您需要设定值后触发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>

答

$(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>

答

如果加入一个选项，选择二尊重您最初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>

如何使用jquery选择select2选择框的选项？

相关推荐