select的用途
一、碎碎念：select框是我们平时在页面中很常见的页面元素之一，今天我想总结一下自己目前为止学到的一些关于select的用法，欢迎大家补充。
二、select的两种用途
1、select的用法之一：制作联动。
联动效果在页面中多用于选择省份和城市，以下将示例一个二级联动。
<!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=utf-8" />
<title>二级联动</title>
<script type="text/javascript">
var JSONObject=[ //json对象存储数据
{'sheng':'黑龙江省',
'city':['哈尔滨市','双鸭山市','佳木斯市','大庆市','齐齐哈尔'],
},
{'sheng':'吉林省',
'city':['长春市','白山市'],
},
{'sheng':'山东省',
'city':['青岛','济南','蓬莱','日照','泰安'],
}
]
window.onload=function(){ //加载页面时执行的函数
var sheng=document.getElementById("sheng"); //获取id为“sheng”的下拉框
var cityl = document.getElementById("city");//获取id为“city”的下拉框
//var opCity=city.getElementsByTagName("option");
for(var i in JSONObject){ //循环遍历json对象 将每一条数据中的“sheng”添加到第一个select中
sheng.options.add(new Option(JSONObject[i].sheng));
}
}
function test(){ //当select的选值改变时，执行此函数
var sheng=document.getElementById("sheng"); //这里我进行了重复的定义，虽然变量名一样，但是在不同的函数中，不能通用，cityl也是如此
var op=sheng.getElementsByTagName("option");
var cityl = document.getElementById("city");//
for(var j in op) {//循环遍历第一个下拉框中的option对象
//console.log(JSONObject[j].city);
//console.log(op[j].selected);
if (op[j].selected && cityl.options.length) { // 如果某个option被选中并且第二个下拉框中含有option
cityl.options.length = 0//把第二个下拉框，即表示城市的下拉框清空
for(var r in JSONObject[j].city){
//循环遍历json对象中的每一条数据中的“city”，并为当前选中的省的城市创建option添加到第二个下拉框中
cityl.options.add(new Option(JSONObject[j].city[r]));
}
//console.log(JSONObject[j].city);
break;//break我会在后面说起~~
}else{
console.log("加油喽！！！");
}
}
}
</script>
</head>
<body>
<div>
请选择省份：
<select id="sheng" onchange="test();">
</select>
</div>
<div>
请选择城市：
<select id="city">
<option>请选择</option>
</select>
</div>
<body>
</html>
运行之后的效果如下：
之前写过一篇关于这个二级联动的效果，有兴趣的同学可以去看看帮我提提意见~二级联动：http://blog.csdn.net/u013551707/article/details/32719923
2、select用法之二：多选择
以下将展示一个应用到多选择的例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <title>select练习</title> <script type="text/javascript" src="jquery.min.js"></script> <style> select{ width:100px; height:160px; } .float{ float:left; } .float_btn{ width: 160px; margin:auto 10px; } .clearfloat{ clear:both; } span{ background-color:#c0c0c0; border:1px solid #999; margin:10px; } </style> <script type="text/javascript"> $(function(){ $("#button1").click(function(){ $("#select1 option").each(function(){ //console.log(this.selected); if(this.selected){ $("#select2").append("<option>"+$(this).val()+"</option>"); this.remove(); } }); }); $("#button2").click(function(){ $("#select1 option").each(function(){ $("#select2").append("<option>"+$(this).val()+"</option>"); this.remove(); }); }); $("#button3").click(function(){ $("#select2 option").each(function(){ if(this.selected){ $("#select1").append("<option>"+$(this).val()+"</option>"); this.remove();
} }); }); $("#button4").click(function(){ $("#select2 option").each(function(){ $("#select1").append("<option>"+$(this).val()+"</option>"); this.remove(); }); }); }); </script> </head> <body> <div class="float"> <select multiple="multiple" id="select1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> </select> </div> <div class="float float_btn"> <button id="button1">选中添加到右边>|</button> <button id="button2">全部添加到右边>></button> <button id="button3">删除添加到左边|< </button> <button id="button4">全部删除添加到左边<< </button> </div> <div class="float"> <select multiple="" id="select2"> </select> </div> <div class="clearfloat"></div> </body> </html>
效果如下：
用户可以利用ctrl键来进行多选，选中目标之后点击按钮完成想要进行的动作，将左边的选项添加到右边，或者将右边的选项添加到左边，当然，全部移动也是可以的。
整体的思路：当点击”选中添加到右边“的按钮时，循环遍历左边的select中的每一项，检查selected属性，将选中的选项添加到右边的select框中，并将选中的选项利用remove方法删除。同理，当点击”删除添加到左边“的选项时循环遍历右边的select框。一旦点击”全部添加到右边“或者”全部删除添加到左边“，则直接将左边（或右边）select中的选项全部添加到右边（或左边）的select框中，并在之后进行删除操作。
三、结语：本来是很想细致的讲一下学习jQuery的过程的，太饿了。。。写不下去了。嗯，今天就写到这里啦！
浙公网安备 33010602011771号