ququjioulai
- 浏览: 58772 次
- 性别:
- 来自: 重庆
-
文章分类
最新评论
功能为：添加 批量添加 删除 选定后背景变色 删除后背景色变回原色 按要求查找
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.table {
border-collapse: collapse; border-left: 1px solid #ccc; border-top: 1px solid #ccc;
}
.table td {
border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 2px 5px 2px 5px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px; text-align: left;
}
.table th {
border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px 3px 5px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px; text-align: left;
}
.table .title {
background-color: #F0F8FF; font-weight: bold;
}
.select {
width:80px;
}
</style>
<script type="text/javascript">
var col="#CCCCCC";
var fontcol="black";
//测试数据
var user=[{"uid":"1","uname":"宋江"},
{"uid":"2","uname":"卢俊义"},
{"uid":"3","uname":"吴用"},
{"uid":"4","uname":"鲁智深"},
{"uid":"5","uname":"武松"},
{"uid":"6","uname":"扈三娘"},
{"uid":"7","uname":"李俊"},
{"uid":"8","uname":"李逵"},
{"uid":"9","uname":"关胜"},
{"uid":"10","uname":"燕青"},
{"uid":"11","uname":"史进"}];
//当用户选择后获取选择的值
function getvalue(){
var quan=document.getElementById("quan");
var qu=document.getElementById("qu");
var x=0;
for(var i=0;i<quan.length;i++){
if(quan[i].selected){
//去除选中时的蓝条，只能投机取巧了
quan.options[i]=new Option(quan[i].text,quan[i].value);
//设置选中后的字体颜色和背景颜色
quan[i].style.color=fontcol;
quan[i].style.backgroundColor=col;
var num=0;
for(var j=0;j<qu.length;j++){
//判断这个值被选过没，如果选过就标识为1并跳出这个循环
if(qu[j].value==quan[i].value){
num=1;
break;
}
x++;
}
//不等于1表示没选中过
if(num!=1){
qu.options[qu.length]=new Option(quan[i].text,quan[i].value);
}
}
}
//现实选了多少人
ren.innerText=document.getElementById("qu").length;
//失去焦点
quan.blur();
}
//删除全部的值
function removevalue(){
var quan=document.getElementById("quan");
//把所有的背景色都设置为白色
for(var i=0;i<quan.length;i++){
quan[i].style.backgroundColor="#ffffff";
}
//清空选择栏
document.getElementById("qu").options.length=0;
ren.innerText=0;
}
//获取全部的值
function getallvalue(){
var quan=document.getElementById("quan");
var qu=document.getElementById("qu");
//把所有的值添加进去，已添加的不管
for(var i=0;i<quan.length;i++){
quan[i].style.color=fontcol;
quan[i].style.backgroundColor=col;
var num=0;
for(var j=0;j<qu.length;j++){
if(qu[j].value==quan[i].value){
num=1;
break;
}
}
if(num!=1){
qu.options[qu.length]=new Option(quan[i].text,quan[i].value);
}
}
ren.innerText=document.getElementById("qu").length;
}
//初始加载测试数据
window.onload=function(){
var quan=document.getElementById("quan");
for(var i=0;i<user.length;i++){
quan.options[i]=new Option(user[i].uid+":"+user[i].uname,user[i].uid);
}
document.getElementById("sec").value="输入客户编号或客户名";
}
</script>
<script>
//删除
function del(){
var qu=document.getElementById("qu");
var quan=document.getElementById("quan");
for(var i=0;i<qu.length;i++){
if(qu[i].selected){
//把移除的选项所对应的地方背景色变回白色
for(var k=0;k<quan.length;k++){
if(qu[i].value==quan[k].value){
quan[k].style.backgroundColor="#ffffff";
break;
}
}
var le=qu.length-1;
for(var j=i;j<le;j++){
var op=new Option(qu[j+1].text,qu[j+1].value);
op.style.color=fontcol;
qu.options[j]=op;
}
//移除最后一个
qu.remove(qu.length-1);
ren.innerText=document.getElementById("qu").length;
qu.blur();
return;
}
}
}
//根据用户输入查找数据
function getsec(){
var name=document.getElementById("sec").value;
var quan=document.getElementById("quan");
var qu=document.getElementById("qu");
var num=0;
quan.options.length=0;
for(var i=0;i<user.length;i++){
//如果用户输入数据在id或名字中存在
if(user[i].uname.indexOf(name)!=-1 || user[i].uid.indexOf(name)!=-1){
quan.options[num]=new Option(user[i].uid+":"+user[i].uname,user[i].uid);
for(var j=0;j<qu.length;j++){
if(qu[j].value==user[i].uid){
quan[num].style.color=fontcol;
quan[num].style.backgroundColor=col;
}
}
num++;
}
}
}
//
function checkthis1(obj){
if(obj.value=="输入客户编号或客户名"){
obj.value="";
}
}
//
function checkthis2(obj){
if(obj.value==""){
obj.value="输入客户编号或客户名";
}
}
</script>
</head>
<body>
<table width="742" height="598" border="0" class="table">
<tr>
<td width="238" style="width:202px"><div>所有人员</div><div><select size="30" style="width:200px" id="quan" onchange="getvalue()" multiple="multiple"></select></div></td>
<td width="116" align="center">
<label style="font-size:12px;"></label><br/>
<input type="text" id="sec" onkeyup="getsec()" onfocus="checkthis1(this)" onblur="checkthis2(this)"/><br/><br/><br/><br/>
<input type="button" onclick="getallvalue();" value="添加全部" /><br/><br/><br/><br/>
<input type="button" onclick="removevalue();" value="移除全部" />
</td>
<td width="265" style="width:202px"><div align="right">已添加<label id="ren">0</label>人</div><div><select id="qu" size="30" style="width:200px" onchange="del();"></select></div></td>
</tr>
</table>
</body>
</html>
0
顶
顶
2
踩
踩
分享到：
发表评论
-
js this
2013-10-24 16:06 563js里this是指向的调用的引用对象 function t ... -
JS作用域
2013-10-24 14:11 558首先js是没有块级作用 ... -
JS变量随便写写
2013-10-21 11:54 792一般来说js全局变量分 ... -
js ++ --
2013-10-18 15:57 585前置++和--是马上执行运算 后置++和--简单点说就是当下一 ... -
关于闭包，自己理解的
2013-10-17 14:09 803其实一直没搞懂闭包啥 ... -
连续定义方法
2013-10-16 18:07 630var newFunc={}; var strs=" ... -
with
2013-10-16 14:38 516记录下，免得又忘记了 var defaultValue={ ... -
Myeclipse的jquery插件jqueryWTP安装
2013-10-12 22:05 780下载插件 jqueryWTP1.20foCN.jar 地址: ... -
aptana3安装jquery插件的两种方式
2013-10-12 11:29 1001总结了下貌似现在只有两种，其实都是用的同一个jquery开发插 ... -
jQuery的.bind()、.live()和.delegate()之间区别
2013-10-11 14:59 593原文：The Difference Between ... -
通过JS函数自动获取表单元素值的方法(转)
2013-09-16 17:26 997做ajax提交懒得组合字符串，在网上找有没自动获取表单方法，找 ... -
jquery小东西记录(3)-选择器，通配符等
2013-08-13 11:24 6081.选择器 (1)通配符： $("input ... -
javascript小东西记录
2013-07-05 17:45 697onload几种方式 window.onload=XXXX;( ... -
jquery小东西记录(2) --jquery和dom对象转换
2013-07-05 11:37 595jQuery对象转成DOM对象： 两种转换方式将一个jQue ... -
js简单的表格操作
2013-06-21 15:43 1166好久没写表格操作全忘了，看别人的看不懂，所以只有自己写个，没有 ... -
慢慢收集javascript的使用方法
2013-06-06 11:22 703子窗体改变父窗体值 parent.document.getEl ... -
jquery小东西记录(1)
2013-05-12 23:45 790$(function(){}); $(document).r ... -
主副窗口传值
2009-07-14 17:19 866主窗体 <html> <head&g ... -
javascript:无聊时写的一个自动获取json值并自动生成表格，可设置表格的列标题与要表现json值的位置
2009-07-12 14:50 2142function test(){ var file ...
相关推荐
在成功引入 jQuery 库之后，就可以利用 jQuery 提供的方法来进行 select 标签操作。下面是一些常见的操作： 1. 选择 select 标签： 通过 jQuery 的选择器可以轻松地选中页面上的 select 标签。例如，若要选择 id ...
`html:select`标签在JSP和Struts框架中提供了方便的下拉列表操作。通过与ActionForm对象和集合对象配合，我们可以轻松地构建动态的、数据驱动的下拉选择列表，实现数据的双向绑定。同时，还可以通过`html:option`和`...
在Struts中，`html:select`标签是用于创建HTML下拉列表的一个重要元素，特别适用于用户界面中需要选择单一或多个选项的场景。本文将深入探讨`html:select`标签的使用方法及其相关知识点。 首先，我们需要理解`...
本篇文章将详细介绍如何利用 jQuery 来获取 Select 标签的值以及相关的表单元素操作。 #### 一、获取 Select 标签的值 ##### 1. 获取 Select 的 Value 值 要获取 Select 下拉框的当前选中值（即 value 属性的值）...
在网页开发中，`<select>` 标签是用于创建下拉列表的元素，它可以提供多个选项供用户选择。在本篇文章中，我们将深入探讨如何使用`<select>`标签，并结合JavaScript API，来实现更丰富的交互功能。我们将涵盖以下几...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括对`<select>`标签的操作。本文将详细讲解如何使用jQuery来管理HTML中的`<select>`元素，包括选择、更改选项，获取选中项的文本、值...
在本文中，我们将深入探讨Struts2中`select`标签的三种不同的使用方法，以及如何从Action类动态获取数据填充这些选项。 ### 一、静态定义`select`标签 1. **静态数据**：在简单的场景下，我们可以直接在JSP页面中...
【标题】"分享带查询的select标签"涉及的是在网页开发中如何实现一个具有搜索功能的下拉选择框。在传统的HTML中，`<select>`标签用于创建一个下拉列表，但其默认功能并不支持用户输入关键词进行筛选。这篇博客（博文...
在IT领域，尤其是在Web开发中，`<select>`标签是一个常用元素，用于创建下拉菜单，让用户在一组预设选项中进行选择。本项目中，我们看到一个创新的应用，即通过两个`<select>`标签来实现类似“双选框”的功能，这在...
### Jquery 操作 Dom 标签 Select 在前端开发中，使用 jQuery 操作 DOM 元素是非常常见的需求之一。特别是对于表单元素如 `select`、`radio` 和 `checkbox` 的操作，更是频繁出现。下面我们将详细介绍如何使用 ...
标题提到的“动态加载select标签下拉框数据”是指在用户交互时，根据需求动态地从服务器获取并填充HTML `<select>` 标签的选项，而不是一次性加载所有数据。这种技术常用于大数据量的下拉列表，以减少初始页面加载...
标题中的“自己开发的一个生成多级select的自定义标签”是指在编程中创建了一个自定义HTML标签，这个标签能够帮助开发者生成多级选择下拉菜单（即多级联动的SELECT元素）。在Web开发中，这样的功能常用于组织结构、...
1. **获取Select标签的value值**： 要获取`Select`标签中当前选中的选项的`value`属性值，可以使用`$('select').val()`。例如： ```javascript var selectedValue = $('select').val(); ``` 这将返回`<select>`...
在Struts2中，`select`标签是一个非常实用的功能，它允许开发者动态地从后台数据库加载数据，创建下拉列表框，使得用户可以选择相应的选项。在结合Hibernate持久层框架时，这种功能尤其方便，因为它可以简化数据获取...
### SIEMENS Multix Select DR 中文操作手册关键知识点 #### 系统安全 - **基本设备**: 在这部分，操作手册介绍了系统的基本组成部分及其安全使用准则。这些包括但不限于探测器系统、平板探测器(FD)、限束器、立式...
在网页开发中，`<select>` 标签用于创建下拉菜单，它是表单元素的一种，通常用于提供用户从预定义选项中选择一个或多个值。实现`<select>`的各种搜索功能，可以极大地提高用户体验，让用户能快速找到所需选项。在...
综上所述，示例演示了使用jQuery来获取select标签中选中项的值和文本的方法，并考虑了没有value属性的特殊情况，还涉及到了事件绑定和DOM操作的基本知识。对于学习和使用jQuery进行前端开发的读者来说，这些内容都是...
这是一款实用的select下拉框美化jquery插件。该select下拉框的原理是将select标签隐藏，并按照select标签用div和list绘制一个控件，将用户对div的操作映射到select上。css文件可以根据不同需求修改。
在网页设计和开发中，`select`元素是HTML中用于创建下拉列表的标签，它提供了用户可以从一组预定义选项中进行选择的功能。然而，原始的`select`元素通常只提供基本的交互功能，比如点击打开下拉列表，然后选择一个...
这时，我们需要使用多个`<select>`标签，并通过JavaScript实现它们之间的联动。 1. **HTML结构**： 创建三个独立的`<select>`标签，每个代表一个级别。添加`id`属性以便于JS操作，并且在每个选项中添加特定的值，...