使用 JS 选择 2 select 选项
Select2 select option with JS
<div class="row justify-content-center align-items-center h-300">
<div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
<div class="form-group">
<select class="mul-select-gift" multiple="true">
<?php
if(mysqli_num_rows($prolist_res11) > 0 ){
while($row = mysqli_fetch_assoc($prolist_res11)){ ?>
<option value="<?php echo $row['proid'];?>"> <?php echo $row['proname'];?> </option>
<?php
}
}
?>
</select>
</div>
</div>
</div>
这是我的 select2 Multi-select
列表。
我需要 select 基于 ajax 成功响应的列表中的一些选项。
ajax成功响应中的代码如下:
success: function(data) {
if(type == 'q_dis') {
var msg = $.parseJSON(data);
var product_or_catagory = msg.product_or_catagory;
var id_string = msg.id_string;
const ids = id_string.split("_sx_");
var sid = ids[0];
var dtail_string = msg.dtail_string;
if(product_or_catagory == 'prod' ) {
document.getElementById('product_list').style.display = 'block';
$('#mul-select-gift').val(sid).trigger('change')
// $('#mul-select-quantity').select2('data', {id: 1127, text: 'Blue_Grass'});
}
}
},
但它不起作用。谁能帮忙
提前致谢
您需要 select 您的 select 框对应 id
或 class
。在你的情况下它是 mul-select-gift
class 然后使用 val
和 trigger('change')
像这样:
$('.mul-select-gift').val(["val1" , "val2"]).trigger('change')
这是工作示例:
$(document).ready(function () {
$('.mul-select-gift').select2({ width: '200px' });
});
function select() {
$('.mul-select-gift').val(["AL2" , "AL3"]).trigger('change')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div class="row justify-content-center align-items-center h-300">
<div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
<div class="form-group">
<select class="mul-select-gift" multiple="multiple">
<option value="AL1">Al1</option>
<option value="AL2">Al2</option>
<option value="AL3">Al3</option>
<option value="AL4">Al4</option>
<option value="AL5">Al5</option>
</select>
</div>
</div>
<button onclick="select()">click to select AL2 and AL3</button>
</div>
<div class="row justify-content-center align-items-center h-300">
<div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
<div class="form-group">
<select class="mul-select-gift" multiple="true">
<?php
if(mysqli_num_rows($prolist_res11) > 0 ){
while($row = mysqli_fetch_assoc($prolist_res11)){ ?>
<option value="<?php echo $row['proid'];?>"> <?php echo $row['proname'];?> </option>
<?php
}
}
?>
</select>
</div>
</div>
</div>
这是我的 select2 Multi-select
列表。
我需要 select 基于 ajax 成功响应的列表中的一些选项。
ajax成功响应中的代码如下:
success: function(data) {
if(type == 'q_dis') {
var msg = $.parseJSON(data);
var product_or_catagory = msg.product_or_catagory;
var id_string = msg.id_string;
const ids = id_string.split("_sx_");
var sid = ids[0];
var dtail_string = msg.dtail_string;
if(product_or_catagory == 'prod' ) {
document.getElementById('product_list').style.display = 'block';
$('#mul-select-gift').val(sid).trigger('change')
// $('#mul-select-quantity').select2('data', {id: 1127, text: 'Blue_Grass'});
}
}
},
但它不起作用。谁能帮忙
提前致谢
您需要 select 您的 select 框对应 id
或 class
。在你的情况下它是 mul-select-gift
class 然后使用 val
和 trigger('change')
像这样:
$('.mul-select-gift').val(["val1" , "val2"]).trigger('change')
这是工作示例:
$(document).ready(function () {
$('.mul-select-gift').select2({ width: '200px' });
});
function select() {
$('.mul-select-gift').val(["AL2" , "AL3"]).trigger('change')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div class="row justify-content-center align-items-center h-300">
<div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
<div class="form-group">
<select class="mul-select-gift" multiple="multiple">
<option value="AL1">Al1</option>
<option value="AL2">Al2</option>
<option value="AL3">Al3</option>
<option value="AL4">Al4</option>
<option value="AL5">Al5</option>
</select>
</div>
</div>
<button onclick="select()">click to select AL2 and AL3</button>
</div>