JSP动态改变下拉列表框(select)中下拉列的最大值

页面上有一个按钮（button）和一个下拉列表框(select)。现在要实现如下的效果：当点击按钮一下时，使下拉列表框中下拉列的最大值为4（下拉列的值分别为1、2、3、4），再点击一次时，列表框下拉列最大值为3（下拉列的值分别为1、2、3），再点击一次时，列表框下拉列最大值为5（下拉列的值分别为1、2、3、4、5）。如何实现？谢谢

解决方案 »

  1.   


      <select id="sel">
    <option value="1">1</option>
    <option value="6">6</option>
    <option value="9">9</option>
    <option value="4">4</option>
      </select>
      <input type="button" onclick="getlastvalue();" value="取尾值">
      <input type="button" onclick="getMaxvalue();" value="取最大值">
      <SCRIPT LANGUAGE="JavaScript">
      <!--
    var sel=document.getElementById("sel");
    function getlastvalue(){
    sel.selectedIndex=sel.options.length-1;
    }
    function getMaxvalue(){
        var max=sel.options[0].value;
    var index=0;
    for(var i=1;i<sel.options.length;i++){
    if(sel.options[i].value>max){
    max=sel.options[i].value;
    index=i;
    }
    }
    sel.selectedIndex=index;
    }
      //-->
      </SCRIPT>
      

  2.   

    <script ...>
    var optionlist = new Array();
    for(var i=0;i<1000;i++)
      optionlist[i]=new Option(i,i);function setSelect(sel, n){
      var len = sel.options.length;
      if(len<n){
        for(var i=len;i<n;i++)
          sel.options[i] = optionlist[i];
      }else if(len>n){
        sel.options.length = n;
      }
    }
    </script>
    <select name=sel></select>
    <input type=button onclick=setSelect(xxx,xx)>
      

  3.   


    <html>
    <head>
    <title>select</title> </head>
    <script language="javascript">
    function $(id){
    return document.getElementById(id);
    }
    </script>
    <body>
    <button value="change" id="btn">Change</button><br />
    <select id="sel">
    <option>----</option>
    </select>
    </body>
    <script>
    var i = 4;
    $('btn').onclick=function(){
    if(i==4){
    //不知道为什么ie6下用innerHTML不work
    //$('sel').innerHTML = "<option>1</option><option>2</option><option>3</option><option>4</option>";
    //至于jsp,可以在这里用ajax得到server返回的字符串来拼接option串
    $('sel').outerHTML = "<select id='sel'><option>1</option><option>2</option><option>3</option><option>4</option></select>";
    i=3;
    }
    else if(i==3){
    $('sel').outerHTML = "<select id='sel'><option>1</option><option>2</option><option>3</option></select>";
    i=5;
    }
    else if(i==5){
    $('sel').outerHTML = "<select id='sel'><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>";
    i=4;
    }
    };
    </script>
    </html> 
      

  4.   

    baidu了一下发现select.innerHTML在ie下是个巨大的bug.
      

  5.   


    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body><input type=button onClick="setSEL();" value=bt>
    <select id="sel">
    <option>---</option>
    </select><script language="javascript">
    <!--
    var t=[4,3,5]
    var k=0
    function setSEL(){
    if (k>=t.length)return
    var obj=document.getElementById("sel")
    obj.options.length = 0;//清除
    for (var i=1;i<=t[k];i++)
         obj.options.add(new Option(i,i)); 
    k++
    }//-->
    </script>
    </body></html>