如何从下拉列表中选择多个项目并将多个值插入 MYSQL
Posted
技术标签:
【中文标题】如何从下拉列表中选择多个项目并将多个值插入 MYSQL【英文标题】：How Select Multiple Items from a Drop Down lists and insert multiple value to MYSQL 【发布时间】：2018-12-15 16:28:34 【问题描述】：我有一个 html 表单，它有一个选择列表框，您可以从中选择来自数据库的多个值。 我希望能够同时选择多个值，在此处的示例中，我们可以通过按添加按钮一次选择多个电子邮件地址，我想在其中使用逗号分隔符显示，所以当我们通过下拉列表将自动显示在输入字段“收件人”中，例如：neymar@gmail.com、ronaldo@gmail.com、messi@gmail.com 然后用户还可以通过按删除输入中的最后一封电子邮件删除按钮，当用户选择了一封电子邮件时，我希望已选择的电子邮件在此下拉列表中不再可用，以避免数据冗余。
最后我希望每个被选中的电子邮件地址都可以发送相同的消息内容（向 mysql 插入多个值）。
【问题讨论】：
【参考方案1】：试试这个代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Dropdown with Multiple checkbox select with jQuery</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
body
font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
color: #fff;
padding: 50px;
width: 300px;
margin: 0 auto;
background-color: #374954;
.dropdown
position: absolute;
top:50%;
transform: translateY(-50%);
a
color: #fff;
.dropdown dd,
.dropdown dt
margin: 0px;
padding: 0px;
.dropdown ul
margin: -1px 0 0 0;
.dropdown dd
position: relative;
.dropdown a,
.dropdown a:visited
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
.dropdown dt a
background-color: #4F6877;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 272px;
.dropdown dt a span,
.multiSel span
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
.dropdown dd ul
background-color: #4F6877;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
.dropdown span.value
display: none;
.dropdown dd ul li a
padding: 5px;
display: block;
.dropdown dd ul li a:hover
background-color: #fff;
button
background-color: #6BBE92;
width: 302px;
border: 0;
padding: 10px 0;
margin: 5px 0;
text-align: center;
color: #fff;
font-weight: bold;
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<dl class="dropdown">
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Apple" />Apple</li>
<li>
<input type="checkbox" value="Blackberry" />Blackberry</li>
<li>
<input type="checkbox" value="HTC" />HTC</li>
<li>
<input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
<li>
<input type="checkbox" value="Motorola" />Motorola</li>
<li>
<input type="checkbox" value="Nokia" />Nokia</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
【讨论】：
以上是关于如何从下拉列表中选择多个项目并将多个值插入 MYSQL的主要内容，如果未能解决你的问题，请参考以下文章