Codeigniter使用jQuery / JavaScript

时间:2017-06-02 19:21:41

标签: jquery codeigniter multi-select

我在我的一个模态中有一个多选项,我想使用下面的代码创建的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');

可能发生的任何线索或如何成功完成此操作?

修改

我注意到当我在手动选择中选择另一个选项时,它会显示我设置为选中的选项。有没有什么方法可以刷新选择以显示更改?

1 个答案:

答案 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>