html的下拉框的几个基本用法

如题所述

举报该问题

推荐答案 æ¨èäº2017-11-29

Javaä»£ç
<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>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://11.wendadaohang.com/zd/FvMFP4782v8FFPM72q7.html

其他回答

第1个回答 2018-12-14

Java代码 <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属性在多选中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>