Question

当我选择多个值时，它将显示在标签中选择的from flask_wtf import FlaskForm from wtforms import StringField, BooleanField, IntegerField, PasswordField, SubmitField, TextAreaField from wtforms.validators import DataRequired, length, email, EqualTo class RegisterForm(FlaskForm): fname = StringField("First Name", validators = [DataRequired(), length(min = 2, max = 20)]) lname = StringField("Last Name", validators = [DataRequired(), length(min = 2, max = 20)]) email = StringField("Email", validators = [DataRequired(), email()]) password = PasswordField("Password", validators = [DataRequired()]) phoneno = StringField("Phone Number", validators=[DataRequired()]) confirm_password = PasswordField("Password", validators = [DataRequired(), EqualTo("password")]) submit = SubmitField("Signup") class LoginForm(FlaskForm): email = StringField("Email", validators = [DataRequired(), email()]) password = PasswordField("Password", validators = [DataRequired()]) remember_me = BooleanField("Remember Me") submit = SubmitField("Login")。我认为JavaScript出了点问题。看一下这张图片：https://photos.app.goo.gl/5Dxwt5gvuE277Uyw9

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

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

Answer 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>

Answer 2

此代码位于您的user.name事件处理程序中，这意味着它将仅在首次加载页面时执行。而且我认为最初在页面加载时，什么都没有选择。

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

$(document).ready

Answer 3

要将数组中的值发送到PHP，您应该设置select标签的“ name”属性，如下所示：

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

此外，别忘了在标签中添加表单并添加提交按钮。

即使我选择了多个值，Bootstrap Multiselect也显示选择了0

3 个答案: