用Javascript给下拉列表增加选项，但页面刷新后就没了，怎么解决？

页面上2个下拉列表，其中第2个的下拉选项是根据第1个的选项而来，也就是说第1个列表的onclick事件里，为第2个列表动态增加选项，为了避免刷新，我用javascript为它增加选项，但这样一来，一旦页面上有任何postback事件，刚增加的选项全部消失了。但我又不想改用服务器端的onclick事件，那样的话每点一下页面就要刷一下，有没有什么好的办法既避免刷新，又可以动态增加Dropdownlist里的值？我看见有些ajax组件可以实现，但我想自己写代码，不知道怎么写法？

解决方案 »

  1.   

    你应当避免刷新，如采用ajax，或者自己写xmlHttpRequest
    或者你采用服务器端的方法。js产生的内容是在内存中的，刷新了当然不会存在
      

  2.   

    这个是可能刷新的。
    ＝＝＝＝＝＝＝＝＝＝＝＝
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Div+CSS+JS树型菜单，可刷新</title>
    <meta name="description" content="http://www.livepo.com">
    <style type="text/css">
    <!--
    *{margin:0;padding:0;border:0;}
    body {
    font-family: arial, 宋体, serif;
    font-size:12px;
    }
    #nav {
    width:180px;
        line-height: 24px; 
    list-style-type: none;
    text-align:left;
        /*定义整个ul菜单的行高和背景色*/
    }/*==================一级目录===================*/
    #nav a {
    width: 160px; 
    display: block;
    padding-left:20px;
    /*Width(一定要)，否则下面的Li会变形*/
    }#nav li {
    background:#CCC; /*一级目录的背景色*/
    border-bottom:#FFF 1px solid; /*下面的一条白边*/
    float:left;
    /*float：left,本不应该设置，但由于在Firefox不能正常显示
    继承Nav的width,限制宽度，li自动向下延伸*/
    }#nav li a:hover{
    background:#CC0000; /*一级目录onMouseOver显示的背景色*/
    }#nav a:link  {
    color:#666; text-decoration:none;
    }
    #nav a:visited  {
    color:#666;text-decoration:none;
    }
    #nav a:hover  {
    color:#FFF;text-decoration:none;font-weight:bold;
    }/*==================二级目录===================*/
    #nav li ul {
    list-style:none;
    text-align:left;
    }
    #nav li ul li{
    background: #EBEBEB; /*二级目录的背景色*/
    }#nav li ul a{
             padding-left:20px;
             width:160px;
    /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
    }/*下面是二级目录的链接样式*/#nav li ul a:link  {
    color:#666; text-decoration:none;
    }
    #nav li ul a:visited  {
    color:#666;text-decoration:none;
    }
    #nav li ul a:hover {
    color:#F3F3F3;
    text-decoration:none;
    font-weight:normal;
    background:#CC0000;
    /* 二级onmouseover的字体颜色、背景色*/
    }/*==============================*/
    #nav li:hover ul {
    left: auto;
    }
    #nav li.sfhover ul {
    left: auto;
    }
    #content {
    clear: left; 
    }
    #nav ul.collapsed {
    display: none;
    }
    -->#PARENT{
    width:300px;
    padding-left:20px;
    }
    </style>
    </head><body>
    <div id="PARENT">
    <ul id="nav">
    <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的网站</a>
    <ul id="ChildMenu1" class="collapsed">
    <li><a href="http://www.flyso.net" target="_blank">www.flyso.net</a></li>
    <li><a href="http://www.flyso.net" target="_blank">www.flyso.net</a></li>
    <li><a href="http://www.flyso.net" target="_blank">www.flyso.net</a></li>
    </ul>
    </li>
    <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a>
    <ul id="ChildMenu2" class="collapsed">
    <a href="http://www.flyso.net" target="_blank">支付</a></li>
    <li><a href="#">网上支付</a></li>
    <li><a href="#">登记汇款</a></li>
    <li><a href="#">在线招领</a></li>
    <li><a href="#">历史帐务</a></li>
    </ul>
    </li>
    <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">网站管理</a>
    <ul id="ChildMenu3" class="collapsed">
    <li><a href="#">登录</a></li>
    <a href="http://www.netany.net" target="_blank">管理</a></li>
    <li><a href="#">管理</a></li>
    <li><a href="#">管理</a></li>
    </ul>
    </li>
    <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a>
    <ul id="ChildMenu4" class="collapsed">
    <li><a href="#">登录</a></li>
    <a href="http://www.netany.net" target="_blank">管理</a></li>
    <li><a href="#">管理</a></li>
    <li><a href="#">管理</a></li>
    </ul>
    </li>
    </ul>
    </div><div style="width:300;padding-left:30px;">
    </br></br>
    工作需要搞了一个菜单，分享给大家，大家一齐学习
    </br></br>
    </div>
    </body>
    </html>
    <script type=text/javascript><!--
    var LastLeftID = "";function menuFix() {
    var obj = document.getElementById("nav").getElementsByTagName("li");

    for (var i=0; i<obj.length; i++) {
    obj[i].onmouseover=function() {
    this.className+=(this.className.length>0? " ": "") + "sfhover";
    }
    obj[i].onMouseDown=function() {
    this.className+=(this.className.length>0? " ": "") + "sfhover";
    }
    obj[i].onMouseUp=function() {
    this.className+=(this.className.length>0? " ": "") + "sfhover";
    }
    obj[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
    }
    }
    }function DoMenu(emid)
    {
    var obj = document.getElementById(emid);
    obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
    if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu
    {
    document.getElementById(LastLeftID).className = "collapsed";
    }
    LastLeftID = emid;
    }function GetMenuID()
    { var MenuID="";
    var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#");

    if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
    {
    _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
    }
    else
    {
    _paramStr = "";
    }

    if (_paramStr.length > 0)
    {
    var _paramArr = _paramStr.split("&");
    if (_paramArr.length>0)
    {
    var _paramKeyVal = _paramArr[0].split("=");
    if (_paramKeyVal.length>0)
    {
    MenuID = _paramKeyVal[1];
    }
    }
    /*
    if (_paramArr.length>0)
    {
    var _arr = new Array(_paramArr.length);
    }

    //取所有#后面的，菜单只需用到Menu
    //for (var i = 0; i < _paramArr.length; i++)
    {
    var _paramKeyVal = _paramArr[i].split('=');

    if (_paramKeyVal.length>0)
    {
    _arr[_paramKeyVal[0]] = _paramKeyVal[1];
    }
    }
    */
    }

    if(MenuID!="")
    {
    DoMenu(MenuID)
    }
    }GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
    menuFix();
    --></script>
      

  3.   

    孟子兄，我就是想通过xmlhttprequest的方法实现既不刷新页面，又增加了选项，请问有没有这方面的例子参考？
      

  4.   

    去下个asp.net ajax工具包 !!
    拉个UpdatePanel控件!!就可以实现无刷新!!不用什么代码 就可以轻松的实现
      

  5.   

    下面这些是使用xmlhttprequest实现无刷新的客户端代码：
    function XmlPost(obj,fullName)
        {
    var svalue = obj.value;
    //alert(svalue);
    var fullObj = document.all(fullName);
    var Url = "../WebPart/Job/ReturnInfo.aspx?departId=" + svalue;
    var result = "";
    //定义xmlhttpRequest对象
    var xmlhttp = false;

    try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
    xmlhttp = false;
    }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.open("GET",Url,false);
    xmlhttp.send("");
    result = xmlhttp.responseText + "";
    //alert("lenght==" + fullOjb.length);
    if (result != "" && svalue != ""){
    fullObj.length=0;
    var piArray = result.split(",");
    fullObj.options.add(new Option("请选择职位",""));
    for (var i=0;i<piArray.length;i++)
    {
    var arr = piArray[i].toString().split("|");
    fullObj.options.add(new Option(arr[1].toString(),arr[0].toString()));
    }
    }else{
    fullObj.length=0;
    fullObj.options.add(new Option("请选择职位",""));}
        }
      

  6.   

    具体的效果可以在这个页面看到：
    http://www.szairport.com/catalog_280.aspx?positionID=74
      

  7.   

    你那个例子虽然实现了无刷新更改option，但是在页面点“搜索”的时候，第2个动态绑上去的列表里的内容会全部消失掉，你觉得这算一个bug吗？我的目的就是要让那些加上去的东西不消失。