当我选择多个值时,它将显示在标签中选择的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吗?
0
$(document).ready(function() {
$("#multifield1 option:selected").each(function() {
console.log(this.text);
});
});
答案 0 :(得分:2)
您需要使用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>
答案 1 :(得分:1)
此代码位于您的user.name
事件处理程序中,这意味着它将仅在首次加载页面时执行。而且我认为最初在页面加载时,什么都没有选择。
您可以侦听select的user.email
事件,并在处理程序中使用您的代码,以便每次更改select值时代码都将运行。
$(document).ready
答案 2 :(得分:0)
要将数组中的值发送到PHP,您应该设置select标签的“ name”属性,如下所示:
<select name="test[]" id="multifield1" class="multiselect-ui form-control" multiple="multiple">
此外,别忘了在标签中添加表单并添加提交按钮。