html如何定义下拉列表点击事件,代码说明如下

html如何定义下拉列表点击事件,代码说明如下,第1张

<html>

<head>

<meta charset="utf-8" />

<title>yu.html</title>

<!-- <script type="text/javascript" src="jquery-1.9.0.min.js"></script> -->

<script type="text/javascript">

window.onload = function ()

    {

    var sel = document.getElementsByName ('selectDropDown')[0]

    sel.onchange = function ()

    {

    var val = this.value

    switch (val)

    {

    case "0":

     alert(val)

    break

    case "-1":

     alert(val)

    break

    case "220":

     alert(val)

    break

    case "200":

     alert(val)

    break

    case "10":

     alert(val)

    break

    default:

     alert(val)

    break

    }

    }

    }

</script>

</head>

<body>

<form name="form" action="">

<select name="selectDropDown">

<option value="0">0

<option value="-1">-1

<option value="220">220

<option value="200">200

<option value="10">10

</select>

</form>

</body>

</html>

<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.lengthi++){   

                //假设该项被选中则把该项相应的索引加入到数组中   

                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.lengthi++){   

            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-1i>=0i--){  //倒着删除是由于   

            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-1i>=0i--){   

             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-1i>=0i--){   

        oOption = oListboxFrom.options[i]   

        //alert(oOption)   

        oListboxTo.appendChild(oOption)   

    }   

  }   

  

  //向右移全部选项   

  function rightAll(){   

  

     ListUtil.moveAll(move1Listbox,move2Listbox)   

  }   

  

  //向左移全部选项   

  function leftAll(){   

    ListUtil.moveAll(move2Listbox,move1Listbox)   

  }   

  

  

  

    </script>   

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5947305.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-09
下一篇 2023-03-09

发表评论

登录后才能评论

评论列表(0条)

保存