Question

我有一个简单的多选下拉列表。我希望能够使用jQuery 添加/获取数据，因为我从数据库中获取数据。我已经看过很多解决方案，包括question。但是，这些解决方案都不适合我。

多选列表为空，因为我想使用jQuery向其添加数据：

var values = "Test,Prof,Off";
var splitValues = values.split(',');
var multi = document.getElementById('DDLSKills');

multi.value = null; // Reset pre-selected options (just in case)
var multiLen = multi.options.length;

for (var i = 0; i < multiLen; i++) {
  if (splitValues.indexOf(multi.options[i].value) >= 0) {
    multi.options[i].selected = true;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Skills</label>
  <select id="DDLSKills" data-style="form-control" class="selectpicker form-control" data-size="5" multiple data-max-options="2">
        </select>
</div>

这是我在上面提到的问题中使用的代码，但它对我不起作用。

非常感谢任何帮助。

Answer 1

使用$.each这样的代替for

var values = "Test,Prof,Off";
var splitValues = values.split(',');

/****************** Execute First ************/
$.each(splitValues, function(k, v) {
  $('#DDLSKills')
    .append($("<option></option>")
      .attr({
      "value": k,
      "selected": true
      })
      .text(v));
});

/****************** Then Multiselect ************/
$('#DDLSKills').multiselect();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

<div class="form-group">
  <label>Skills</label>
  <select id="DDLSKills" data-style="form-control" class="selectpicker form-control" data-size="5" multiple data-max-options="2">
        </select>
</div>

如何获取和设置Bootstrap Multi select下拉列表值？

1 个答案: