Select Inputドロップボックス
72977 ワード
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>gridtitle>
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-21option>
<option value="2">22-25option>
<option value="3">26-29option>
<option value="4">30-35option>
<option value="5">Over35option>
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-21option>
<option value="2">22-25option>
<option value="3">26-29option>
<option value="4">30-35option>
<option value="5">Over35option>
<option value="6">Over40option>
<option value="7">Over50option>
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-21option>
<option value="2">22-25option>
<option value="3">26-29option>
<option value="4">30-35option>
<option value="5">Over35option>
<option value="6">Over40option>
<option value="7">Over50option>
select>
div>
<p> p>
<p>
<table>
<tr collspan="2">
<td>
<div>
<select name="moreselAge" id="move1" multiple="multiple" size="7">
<option value="1">18-21sfiodsoption>
<option value="2">22-25sjdfdoption>
<option value="3">26-29xxsoption>
<option value="4">30-35vsoption>
<option value="5">Over35dcffoption>
<option value="6">Over40shhfsdoption>
<option value="7">Over50sdefsoption>
<option value="8">Over88wwwoption>
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-21option>
<option value="2">22-25option>
<option value="3">26-29option>
<option value="4">30-35option>
<option value="5">Over35option>
<option value="6">Over40option>
<option value="7">Over50option>
<option value="8">Over88option>
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>