![<select> 标签的 multiple 属性规定可同时选择多个选项。[通俗易懂]](https://img.mushiming.top/app/bianchenghao_cn/ebe1697de6da4c95970a30778412ef22.jpg "<select> 标签的 multiple 属性规定可同时选择多个选项。[通俗易懂]插图")
1.使用multiple属性可以实现多选
<select multiple="multiple" size=”2″>
<option value =”volvo”>Volvo</option>
<option value =”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>
2.<%@ page language=”java” contentType=”text/html; charset=GBK”
pageEncoding=”GBK”%>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GBK”>
<script type=”text/javascript” src=”js/jquery.js”></script>
<title>报表定制</title>
<style type=”text/css”>
.tabstyle table tr td {
background-color: #ECF5FA;
height: 25px;
font-size: 12px;
}
</style>
</head>
<body>
<div class=”tabstyle”>
<form id=”designForm” action=”projectStatisticsAction.do?method=addDesign” method=”post”>
<table width=”96%” id=”list” border=”0″ cellpadding=”0″
cellspacing=”1″ width=”100%” align=”center”
style=”background-color: #A2D5F0;”>
<tr>
<td align=”right” width=”25%”>
统计待显示数据：
</td>
<td colspan=”3″ width=”75%” align=”center” height=”250″>
<table width=”96%” id=”list” border=”0″ cellpadding=”0″
cellspacing=”0″ width=”100%” align=”center”
style=”background-color: #A2D5F0;”>
<tr>
<td width=”15%”>
</td>
<td width=”30%” align=”right” height=”250″>
<select id=”fb_list” multiple=”multiple” size=”15″
style=”width: 150px;”>
<option value=”project_Name”>
项目名称
</option>
<option value=”pm_Name”>
项目经理
</option>
<option value=”contact_Person”>
项目方联系人
</option>
<option value=”person_Tel”>
项目方电话
</option>
<option value=”proj_Depart”>
项目单位
</option>
</select>
</td>
<td align=”center” width=”5%”>
<input type=”button” id=”add” value=”添加>>” />
<br />
<br />
<input type=”button” id=”delete” value=”<<删除” />
</td>
<td width=”20%” align=”left”>
<select id=”select_list” multiple=”multiple” size=”15″
style=”width: 150px;”>
</select>
</td>
<td width=”5%” align=”left”>
<input type=”button” name=”s2up” id=”s2up” value=”↑” />
<br />
<input type=”button” name=”s2down” id=”s2down” value=”↓” />
</td>
<td width=”25%”>
</td>
</tr>
</table>
</td>
</tr>
<tr align=”center”>
<td colspan=”5″ align=”center” vAlign=middle>
<input type=”hidden” value=”” name=”orderName” id=”orderName” />
<input type=”hidden” value=”0″ name=”release” id=”release” />
<input type=”hidden” value=”” id=”selectName” name=”selectName” />
<input type=”hidden” value=”” id=”selectChName”
name=”selectChName” />
<input type=”submit” id=”submitform” value=”提 交” class=”daochu”
οnclick=”return checkSubmit();” />
<input type=”button” value=”返 回” onClick=”history.go(-1);”
class=”daochu”>
</td>
</tr>
<script>
/**
*动态的给左边的下拉列表创建选项
*具体情况可以从数据库读取数据动态创建选项
*/
$(function(){
$(“#add”).click(function(){
if($(“#fb_list option:selected”).length>0)
{
$(“#fb_list option:selected”).each(function(){
$(“#select_list”).append(“<option value='”+$(this).val()+”‘>”+$(this).text()+”</option”);
$(this).remove();
})
}
else
{
alert(“请选择要添加的显示数据项！”);
}
})
})
$(function(){
$(“#delete”).click(function(){
if($(“#select_list option:selected”).length>0)
{
$(“#select_list option:selected”).each(function(){
$(“#fb_list”).append(“<option value='”+$(this).val()+”‘>”+$(this).text()+”</option”);
$(this).remove();
})
}
else
{
alert(“请选择要删除的数据项！”);
}
})
})
$(function(){
$(“#submitform”).click(function(){
if($(“#select_list option”).length>0)
{
$(“#select_list option”).each(function(){
$(“#selectName”).val($(“#selectName”).val()+”,”+$(this).val());
$(“#selectChName”).val($(“#selectChName”).val()+”,”+$(this).text());
})
}
else
{
alert(“请选择要添加的显示数据项！”);
return false;
}
$(“#selectName”).val($(“#selectName”).val().substr(1));
$(“#selectChName”).val($(“#selectChName”).val().substr(1));
$(“#orderName”).val($(“#yiji”).val()+” “+$(“#shengjiang”).val()+”,”+$(“#erji”).val()+” “+$(“#shengjiang2”).val());
})
})
//双击实现左右移动
$(“#select_list”).dblclick(function(){
var alloptions = $(“#select_list option”);
var so = $(“#select_list option:selected”);
so.get(so.length-1).index == alloptions.length-1?so.prev().attr(“selected”,true):so.next().attr(“selected”,true);
$(“#fb_list”).append(so);
});
$(“#fb_list”).dblclick(function(){
var alloptions = $(“#fb_list option”);
var so = $(“#fb_list option:selected”);
so.get(so.length-1).index == alloptions.length-1?so.prev().attr(“selected”,true):so.next().attr(“selected”,true);
$(“#select_list”).append(so);
});
$(“#s2up”).click(function(){
var so = $(“#select_list option:selected”);
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});
$(“#s2down”).click(function(){
var alloptions = $(“#select_list option”);
var so = $(“#select_list option:selected”);
if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i–)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
function checkSubmit() {
var yiji =$(“#yiji”).val();
var erji =$(“#erji”).val();
if(yiji == erji){
alert(“一级排序和二级排序不能相同”);
return false;
}
return true;
}
</script>
</table>
</form>
</div>
</body>
</html>
今天的文章<select> 标签的 multiple 属性规定可同时选择多个选项。[通俗易懂]分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/58417.html
