为了账号安全,请及时绑定邮箱和手机立即绑定

即使我选择多个值,Bootstrap 多选仍显示 0 选择

即使我选择多个值,Bootstrap 多选仍显示 0 选择

PHP
慕的地6264312 2023-12-15 16:22:39
当我选择多个值时,它会显示在标签中选择的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>
查看完整描述

2 回答

?
叮当猫咪

TA贡献1776条经验 获得超12个赞

您需要使用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>


查看完整回答
反对 回复 2023-12-15
?
智慧大石

TA贡献1946条经验 获得超3个赞

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


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


$(document).ready(function() {


    $("#multifield1").on("change", function() {

      $(this).find("option:selected").each(function() {

        console.log(this.text);

      });

    })


});


查看完整回答
反对 回复 2023-12-15
?
阿波罗的战车

TA贡献1862条经验 获得超6个赞

要将数组中的值发送到 PHP,您应该将“name”设置为您的选择标签的属性如下所示:

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

另外,不要忘记在标签中创建表单并添加提交按钮。


查看完整回答
反对 回复 2023-12-15
  • 2 回答
  • 0 关注
  • 84 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信