grid
18-21
22-25
26-29
30-35
Over35
多选 须要添加 multiple属性
在多选中size属性 能够初始化下拉框默认显示几个选项
18-21
22-25
26-29
30-35
Over35
Over40
Over50
selectName :
selectValue:
18-21
22-25
26-29
30-35
Over35
Over40
Over50
移动选项
18-21sfiods
22-25sjdfd
26-29xxs
30-35vs
Over35dcff
Over40shhfsd
Over50sdefs
Over88www
|
" onclick = "rightSingle()" />
>" onclick = "rightAll()"/>
18-21
22-25
26-29
30-35
Over35
Over40
Over50
Over88
|
//获得下拉列表对象
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 //假设该项被选中则把该项相应的索引加入到数组中
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 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)
}
//加入button的点击事件方法
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); //删除选中的选项
}
//删除button点击事件
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);
}
