即使我选择多个值，Bootstrap Multiselect 也显示 0 已选中答案

【问题标题】：Bootstrap Multiselect showing 0 selected even if i select multiple values即使我选择多个值，Bootstrap Multiselect 也显示 0 已选中
【发布时间】：2020-09-05 18:53:42
【问题描述】：

当我选择多个值时，它会在标签中显示0。我认为Javascript有问题。看看这张图片：https://photos.app.goo.gl/5Dxwt5gvuE277Uyw9

我还想将所有值存储在我的数据库中。我是否应该将所有值存储在一个数组中，然后将其传递给 PHP？

$(document).ready(function() {
  $("#multifield1 option:selected").each(function() {
    console.log(this.text);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">


<div class="col-lg-6">
  <div class="form-group">
    <strong>Area of Interest:</strong>
    <select id="multifield1" class="multiselect-ui form-control" multiple="multiple">
      <option value="X">X</option>
      <option value="Y">Y</option>
      <option value="Z">Z</option>
    </select>
  </div>
</div>

【问题讨论】：

您没有在页面中包含 jquery.js，这是 bootstrap 所依赖的。 Should I store all the values in an array and then pass it to PHP? 如果您使用 AJAX 发送请求，那么可以。如果您只是发送普通形式的 POST，那么您不必担心它，因为它会为您处理好
看看the function on this page on the jquery docs你的js需要加个change函数
谢谢，我会查看文档。但我被困在多选选项中，其中标签值没有更新，因为我选择了多个值，它仍然显示 0 选中。任何建议。

标签： javascript php html jquery css

【解决方案1】：

你需要使用onChange事件处理器：

$('#multifield1').multiselect({
    onChange: function(option, checked) {
        var selectedItems = $("#multifield1 option:selected").length;
        console.log('selected items: ' + selectedItems);
    }
});

$('button.btn.btn-info').on('click', function(e) {
    var selectedItems = $("#multifield1 option:selected").length;
    console.log('Info btn: selected items: ' + selectedItems);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">

<button type="button" class="btn btn-info">Info</button>

<div class="col-lg-6">
    <div class="form-group">
        <strong>Area of Interest:</strong>
        <select id="multifield1" class="multiselect-ui form-control" multiple="multiple">
            <option value="X">X</option>
            <option value="Y">Y</option>
            <option value="Z">Z</option>
        </select>
    </div>
</div>

【讨论】：

【解决方案2】：

此代码放置在您的$(document).ready 事件处理程序中，这意味着它只会在页面首次加载时执行。而且我假设最初在页面加载时，尚未选择任何内容。

您可以侦听 select 的 onchange 事件并在处理程序中使用您的代码，以便每次更改选择值时代码都会运行。

$(document).ready(function() {

    $("#multifield1").on("change", function() {
      $(this).find("option:selected").each(function() {
        console.log(this.text);
      });
    })

});

【讨论】：

好的，它显示在日志中，但即使我选择了多个值，它也显示 0 已选中。
@ShadabEqbal 什么仍然显示 0 被选中？
在多选中，当我选择多个选项时，标签必须根据我选择的项目数进行更新，但无论我选择什么，它仍然显示 0 选项被选中，但是在内部它被选中并且值正在发布到数据库中。看看这张图片：photos.app.goo.gl/5Dxwt5gvuE277Uyw9
@ShadabEqbal 哦，好吧，现在我明白了。如果您愿意，请将图片包含在问题中，以便其他人可以更好地理解您的问题。可悲的是，我自己也没有更好的答案。

【解决方案3】：

要将数组中的值发送到 PHP，您应该像这样设置选择标签的“名称”属性：

<select name="test[]" id="multifield1" class="multiselect-ui form-control" multiple="multiple">

另外，不要忘记在标签中制作表单并添加提交按钮。

【讨论】：