我在我的一个模态中有一个多选项,我想使用下面的代码创建的jQuery / JavaScript填充:
<select multiple class="selectpicker display-block" data-width="100%" name="non-compatibility[]" id="non-compatibility" title='<?php echo _l('invoice_suboption_noncompatible'); ?>'>
<option value=""></option>
<?php foreach($suboptions as $suboption){ ?>
<option value="<?php echo $suboption['plat_option'].','.$suboption['name']; ?>" data-subtext="<?php echo $suboption['plat_option']; ?>"><?php echo $suboption['name']; ?></option>
<?php } ?>
</select>
值看起来像RAM,4GB和HardDrive,1TB。我想使用jQuery / JavaScript为多选项设置选定的值,但我很难。我认为下面的内容会起作用,但事实并非如此。 $('select[name="non-compatibility[]"]').val('RAM,4GB');
可能发生的任何线索或如何成功完成此操作?
修改
我注意到当我在手动选择中选择另一个选项时,它会显示我设置为选中的选项。有没有什么方法可以刷新选择以显示更改?
答案 0 :(得分:1)
这可能对你有所帮助。
$( '.selectpicker' ).multiselect();
$('.btn-set-val').click(function(){
var tes = ['tes','ppp'];
$( '.selectpicker' ).val(tes);
$( '.selectpicker' ).multiselect( 'refresh' );
});
$('.btn-add-opt').click(function(){
$( '.selectpicker' ).append("<option>new_opt</option>");
$( '.selectpicker' ).multiselect( 'rebuild' );
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<select class="selectpicker" multiple>
<option>tes</option>
<option>tesewew</option>
<option>32tes</option>
<option>te32esds</option>
<option>ppp</option>
</select>
<button class='btn-set-val'>Set selected value</button>
<button class='btn-add-opt'>Add new option</button>