Question

我正在使用Bootstrap Multiselect插件来开发包含复选框的下拉列表。

提交时，值会正确发送到我的数据库中。但是，在检索相同的选定数据时，我似乎无法显示多个值。

当只有一个选定值时，使用.val()可以很好地显示它，但是当存在多个值时，.val()无法显示任何内容。

所以，我尝试搜索Bootstrap Multiselect网站并找到了.multiselect('select',values)方法。

现在，显示了多个值，但现在有两个下拉列表。

也许是因为我两次打电话给.multiselect。请帮我显示多个值和一个下拉列表。这是我的代码：

<select id="Damage_@item.Id" name="Damage_@item.Id" class="form-control multiselect" style="margin-bottom: 10px;" multiple="multiple">
                            <option value="0" selected>Pick One</option>
<input type="hidden" id="Hidden_Damage_@item.Id" name="Hidden_Damage_@item.Id" value="@item.Damage" />
</select>


<script type="text/javascript">
        $(document).ready(function () {
            //$(function () {
                $('.multiselect').multiselect({
                    onInitialized: function (select, container) {


                        var selectedDamageValues = $('#Hidden_' + select[0].id).val();
                        console.log(selectedDamageValues);
                        var array = selectedDamageValues.split(",");



                },
        numberDisplayed: 1,
            buttonWidth: '100%'
            });
        //});
    });
</script>

Answer 1

您必须使用$(selector).multiselect('select', [array of values]);以编程方式分配选择项

见下面的代码：

＆＃13;

$(document).ready(function() {
  $('#example-getting-started').multiselect({
    enableFiltering: true,
    buttonText: function(options, select) {
      if (options.length == 0) {
          return 'Select Groups';
      }
      else {
          var selected = '';
          options.each(function() {
              selected += $(this).text() + ', ';
          });
          return selected.substr(0, selected.length -2);
      }
    }
  });
  
  $('#example-getting-started').multiselect('select', ['one', 'four']);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<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.min.js"></script>

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
</select>

＆＃13;

如何使用Bootstrap Multiselect显示所选值

1 个答案: