<select> 标签的 multiple 属性规定可同时选择多个选项。
来源：互联网 发布：java 压力测试工具 编辑：程序博客网 时间：2024/04/30 23:01
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"
onclick="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 属性规定可同时选择多个选项。
- select标签multiple属性的使用方法
- 修改select标签为可输入内容的input标签，同时在首次点击第一个下拉框时也会触发onchange事件
- Firefox 新增容器标签：可同时登录多个用户
- select标签添加multiple属性后，页面呈现的样式发生改变，如何修改
- php 获取multiple的多个select值
- 可输入的select标签(input+select)
- select 中multiple属性
- 怎么动态的设置select标签中option选项的selected属性
- html select标签的属性
- html select标签的属性
- Structs select标签的属性
- 【select】选择标签select
- ExtJS4 ComboBox选择第一个选项时不能触发select事件的处理
- ionic（angularjs）select下拉选择第一个选项为空白的解决办法
- AngularJS系列之select下拉选择第一个选项为空白的解决办法
- AngularJS系列之select下拉选择第一个选项为空白的解决办法
- JQ复选框，选择后按钮触发后出现图片，可同时出现多个图片
- AOP（8.19暂停至spring20）
- 运行.bat文件
- 运动目标跟踪（十七）--一些跟踪算法简述及跟踪牛人资料整理
- 1037 Keep on Truckin'
- 计划linux学习
- <select> 标签的 multiple 属性规定可同时选择多个选项。
- BZOJ1106 [POI2007]立方体大作战tet
- 介绍一个P2P点播直播开源项目，挺不错的
- [python] 类常用的内置方法
- 分布式文件系统FastDFS架构剖析
- 计算天线可以传输距离的方法
- Android4.4 wpa_supplicant深入分析之初识wpa_supplicant
- 无法打开虚拟机 xxxxx.vmx 内部错误
- Android布局优化
