虽然使用EXT开发了一段时间，但是自己觉得我对javascript还是不是很熟，所以边看书边做小例子 给自己以后用到的时候查看下，都是很基本的东西，对初学者可能有点帮助
下面是代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>grid</title>
</head>
<body>
<input type="button" value="getSelect" onclick = "getSelect()"/>
<input type="button" value="selectbtn" onclick = "getSelAge()"/>
<div>
<select name="selectAge" id="selectAge">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
</select>
</div>
<p>
<input type="button" value="moreSelect" onclick = "moreSelect()"/>
<div>
<div>多选 需要增加 multiple属性<br>
在多选中size属性 可以初始化下拉框默认显示几个选项
</div>
<div>
<select name="moreselAge" id="moreselAge" multiple="multiple">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
<option value="6">Over40</option>
<option value="7">Over50</option>
</select>
</div>
</div>
<p></p>
<input type="button" value="addNewbtn" onclick = "addNewSelections()"/>
<input type="button" value="deletebtn" onclick = "deleteselections()"/>
<input type="button" value="deleAllbtn" onclick = "deleteAllSelections()"/>
<div>selectName :<input type="text" id="txtName"/></div>
<div>selectValue:<input type="text" id="txtValue"/></div>
<div>
<select name="moreselAge" id="addNew">
<option value="1" selected>18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
<option value="6">Over40</option>
<option value="7">Over50</option>
</select>
</div>
<p>移动选项</p>
<p>
<table>
<tr collspan="2">
<td>
<div>
<select name="moreselAge" id="move1" multiple="multiple" size="7">
<option value="1">18-21sfiods</option>
<option value="2">22-25sjdfd</option>
<option value="3">26-29xxs</option>
<option value="4">30-35vs</option>
<option value="5">Over35dcff</option>
<option value="6">Over40shhfsd</option>
<option value="7">Over50sdefs</option>
<option value="8">Over88www</option>
</select>
</div>
</td>
<td width="100" align="center">
<input type="button" value=">" onclick = "rightSingle()" /><br>
<input type="button" value=">>" onclick = "rightAll()"/><br>
<input type="button" value="<" onclick = "leftSingle()"/><br>
<input type="button" value="<<" onclick = "leftAll()"/>
</td>
<td>
<div>
<select name="moreselAge" id="move2" multiple="multiple" size="7">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
<option value="6">Over40</option>
<option value="7">Over50</option>
<option value="8">Over88</option>
</select>
</div>
</td>
<tr>
</table>
</body>
<script type="text/javascript">
//获得下拉列表对象
oListbox = document.getElementById("selectAge");
var ListUtil = new Object();
var selectbtn = document.getElementById("selectbtn");
function getSelAge (){
//访问选项
alert(oListbox.options[1].firstChild.nodeValue); //显示的内容
alert(oListbox.options[1].getAttribute("value"));//对应的value
alert("获得它在集合中的位置== " + oListbox.options[2].index); //获得它在集合中的位置
alert("获得集合的元素个数长度== " + oListbox.options.length); //获得集合的元素个数长度
}
/*************************************************************************************************/
//获得选中选项
function getSelect(){
var indx = oListbox.selectedIndex;
alert("获得选中的选项的索引 "+ indx );
}
//多选下拉框
var moreselAgeList = document.getElementById("moreselAge");
/*******************************************************************/
//入参 下拉框对象
ListUtil.getSelectIndexes = function (oListbox){
var arrIndexes = new Array();
for(var i=0 ; i<oListbox.options.length;i++){
//如果该项被选中则把该项对应的索引添加到数组中
if(oListbox.options[i].selected){
arrIndexes.push(i);
}
}
return arrIndexes; //返回选中的选项索引
}
/***************************************************************/
// 多选
function moreSelect(){
var arrIndexes = ListUtil.getSelectIndexes(moreselAgeList);
alert("选中的数组length = "+ arrIndexes.length + " 选中的选项索引为 ："+ arrIndexes);
}
/************************添加新选项***************************************************************/
//
var addNewLisbox = document.getElementById("addNew"); //获得下拉框对象
var otxtName = document.getElementById("txtName"); //name 文本框
var otxtValue = document.getElementById("txtValue"); //value 文本框
//添加方法
ListUtil.addOptions = function(oListbox,sName,sValue){
var arryV = new Array();
//标记输入的值是否可以添加
var isAdd = false;
//判断是否有重复的值
for(var i =0 ;i<oListbox.options.length;i++){
var sv = oListbox.options[i].getAttribute("value");
if(sv == sValue){
alert("不能添加重复的value");
return ;
}else{
isAdd = true;
}
}
if(isAdd || oListbox.options.length == 0){
//下面使用dom方法创建节点
var oOption = document.createElement("option");// 创建option元素
oOption.appendChild(document.createTextNode(sName));
//因为选项的值不是必须的，所以如果传入了值 则添加进来
if(arguments.length == 3){
oOption.setAttribute("value",sValue);
}
oListbox.appendChild(oOption); //把选项添加进列表框
alert("添加成功!!");
} // end if(isAdd)
}
//添加按钮的点击事件方法
function addNewSelections(){
var txtname = otxtName.value;
var txtvalue = otxtValue.value;
if(txtname != "" && txtvalue != ""){
ListUtil.addOptions(addNewLisbox,txtname,txtvalue);//添加新项
otxtName.value = "";
otxtValue.value = "";
}else{
alert("请输入要添加的值和name");
return;
}
}
/*******************删除选中选项****************************************************************/
//传入下拉框对象和(索引)
ListUtil.deleteOptons = function(oListbox){
var selIndex = oListbox.selectedIndex;
if(oListbox.options.length == 0){
alert("列表中无元素可删除");
return ;
}
oListbox.remove(selIndex); //删除选中的选项
}
//删除按钮点击事件
function deleteselections(){
ListUtil.deleteOptons(addNewLisbox);
}
/**********删除所有***********************************************************************/
ListUtil.deletsAllOptions = function(oListbox){
if(oListbox.options.length != 0){
for(var i= oListbox.options.length-1;i>=0;i--){ //倒着删除是因为
oListbox.remove(i);
}
}else{
alert("该列表为空!");
}
}
function deleteAllSelections(){
ListUtil.deletsAllOptions(addNewLisbox);
}
/*******移动选项***************************************************************************************/
//获得下拉框
var move1Listbox = document.getElementById("move1"); //左边下拉框
var move2Listbox = document.getElementById("move2"); //右边下拉框
//移动一个或多个选中的选项
ListUtil.move = function(oListboxFrom ,oListboxTo){
//var idx1 = oListboxFrom.selectedIndex;
var arrIndexes = ListUtil.getSelectIndexes(oListboxFrom);
var oOption ;
if(arrIndexes.length == 0 ){
alert("请选择至少一个选项!");
return ;
}else{
for(var i=oListboxFrom.options.length-1;i>=0;i--){
oOption = oListboxFrom.options[i];
if(oOption.selected && oOption != null ){
oListboxTo.appendChild(oOption);
}
}
}
}
//向右移 一个元素
function rightSingle(){
ListUtil.move(move1Listbox,move2Listbox);
};
//向左移 一个元素
function leftSingle(){
ListUtil.move(move2Listbox,move1Listbox);
}
ListUtil.moveAll = function(oListboxFrom,oListboxTo){
for(var i=oListboxFrom.options.length-1;i>=0;i--){
oOption = oListboxFrom.options[i];
//alert(oOption);
oListboxTo.appendChild(oOption);
}
}
//向右移所有选项
function rightAll(){
ListUtil.moveAll(move1Listbox,move2Listbox);
}
//向左移所有选项
function leftAll(){
ListUtil.moveAll(move2Listbox,move1Listbox);
}
</script>
</html>
附件可以看到效果
分享到：
相关推荐
由于基本无法编辑录制的文件，所以录制的时候为了避免录制失败，推荐纯粹使用键盘操作，以下是比较关键的几个键盘组合： Ctrl+F ＝ 调出查找对话框 Ctrl+H ＝ 调出替换对话框 Alt+F4 ＝ 关闭作用，比如，关闭查找...
在layui框架中使用form.on方法绑定select下拉框选中事件，form.on()方法不执行, 解决方法有以下几点： 1. html中form标签中要有class=”layui-form”，否则不生效 2. form.on方法必须放在layui.use({})里 ...
84.dotnet由哪几个基本框架组成? 85.Oracle中SGA是什么? 86.web servers是什么? 87.UNIX中QT是什么意思? 88.在软件开发生命周期中的哪个阶段开始测试? 89.dotnet与J2EE的比较? 90.什么是ActiveX? 91.Java中...
快速部署服务器及WSS安装说明，通过以下几个步骤，可以在5分钟内完成服务器部署，及WSS的安装（不包括下载时间）。 以下部署方法Windows操作系统适用： 1, 服务器环境部署 -下载“Apache+Php+Mysql V1.3 绿色自动...
使用它不需要编写多少代码，只需对验证元素简单配置一下即可，使用方便，也不会影响页面的布局，并可以精确判断客户端输入框的长度、必填、数据类型(整数型、浮点型、字母型、数字字母混合型)和下拉框等，及对需要...
与正则表达式相关的几个小工具 你真的了解.NET中的String吗？ .NET中的方法及其调用（一） 如何判断ArrayList,Hashtable,SortedList 这类对象是否相等 帮助解决网页和JS文件中的中文编码问题的小工具 慎用const...
你想写一个只有几个标准特性的简单的网站。 1.1.1 节省时间 CI 学习周期短，见效快。让我们试着评估一下相关的要素： CI 如何减少代码量？ 你真的可以减少很多工作量：敲击键盘的次数减少了，代码错误减少了，你...
23.select,selectFrame,selectWindow,selectPopUp，这几个功能的用法，以及在什么时候用？ select用来操作下拉框。语法：select(selectLocator,optionLocator) ,例：select id=person_person_type,lable=非户籍人口...
因为这些特征，Popup窗口制作的菜单比起传统的div(层)实现的菜单有着得天独厚的优势，不仅效果会非常好，而且代码也会是非常少的，只是对于实现起来却有几个需要解决的棘手问题：多个Popup共存的问题、如何递归生成...
由于基本无法编辑录制的文件，所以录制的时候为了避免录制失败，推荐纯粹使用键盘操作，以下是比较关键的几个键盘组合： Ctrl+F ＝ 调出查找对话框 Ctrl+H ＝ 调出替换对话框 Alt+F4 ＝ 关闭作用，比如，关闭查找...
由于基本无法编辑录制的文件，所以录制的时候为了避免录制失败，推荐纯粹使用键盘操作，以下是比较关键的几个键盘组合： Ctrl+F ＝ 调出查找对话框 Ctrl+H ＝ 调出替换对话框 Alt+F4 ＝ 关闭作用，比如，关闭查找...
13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期转换为字符串的方法 13.20 检测是否是闰年 13.21 年份加减函数 13.22 精确到千分之一秒 13.23 离开某天的时间...
13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期转换为字符串的方法 13.20 检测是否是闰年 13.21 年份加减函数 13.22 精确到千分之一秒 13.23 离开某天的时间...
1.2.2 PHP擅长的几个领域及产品介绍 5 1.2.3 PHP不适合做什么 6 1.2.4 其他案例 6 1.3 PHP的Hello, world预览 6 1.3.1 第一个PHP程序Hello, world 6 1.3.2 学习PHP应该准备哪些软件 8 1.3.3 相关知识领域的介绍 9 ...