DropDownList 无刷新联动问题

Question

我用DropDownList做无刷新三级联动 用的AJXA取值赋值 可是 JS的变量经常性的 取错值
如果我每次响应事件都 ALERT()一下 那肯定没错误 可不alert的话 就会时不时的出现 变量没有取到值 或者取的是上次联动时的值 这个问题要怎么解决？ 是JS本身的问题吧
还有 我可不可以用.NET带的AJXA控件做 不过没做过 有会AJAX控件的教教我 具体怎么做

Answer 1

参考：Asp.net JQuery ajax级联
http://hi.baidu.com/shenhui_1/blog/item/242c9f07cbd0511b4afb5111.html

Answer 2

在使用前加上这个
<asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                <ContentTemplate>
                                    <asp:DropDownList ID="dropDownListProvince" AutoPostBack="true" DataTextField="NAME"
                                        DataValueField="CODE" runat="server" OnInit="dropDownListProvince_Init" OnSelectedIndexChanged="dropDownListProvince_SelectedIndexChanged">
                                    </asp:DropDownList>
                                    <asp:DropDownList ID="dropDownListCity" Width="150px" runat="server" AutoPostBack="true"
                                        DataTextField="NAME" DataValueField="CODE" OnSelectedIndexChanged="dropDownListCity_SelectedIndexChanged">
                                    </asp:DropDownList>
                                    <asp:DropDownList ID="dropDownListRegion" Width="150px" runat="server">
                                    </asp:DropDownList>
                                </ContentTemplate>
                            </asp:UpdatePanel>这是我做的区域选择  放在UpdatePanel里就不会刷新了。

Answer 3

说明你js还是有问题。没原因，js不会乱报错。

Answer 4

参考：Asp.net JQuery ajax级联
http://hi.baidu.com/shenhui_1/blog/item/242c9f07cbd0511b4afb5111.html 

Answer 5

我做的城市联动 假如先选择了 河北 然后 会列出 河北的市 现在选择辽宁 然后列出的还是河北的市 不会报错 只是取值是 之前的 虽然只是偶尔才出现此情况 但如果 使用 alert（1）弹出一下 那就永远不会报错

Answer 6

你是怎么弄的 我这么写的 我把UpdateMode="Conditional"去掉就和你的一样了吧 可还是不行啊
选择完 虽然不刷新页面 可状态和没选一样 方式 被后退了一样
  <tr>
      <td class="td_bg"   width="8%"  style="text-align:right" >所属分类：</td>
      <td class="td_bg" width="92%">
   
     <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
      <asp:DropDownList ID="Cate1" runat="server" 
              onselectedindexchanged="Cate1_SelectedIndexChanged"   AutoPostBack="true">
      </asp:DropDownList>
       <asp:DropDownList ID="Cate2" runat="server" AutoPostBack="true"
              onselectedindexchanged="Cate2_SelectedIndexChanged" >
      </asp:DropDownList>
       <asp:DropDownList ID="Cate3" runat="server" >
      </asp:DropDownList>
          </ContentTemplate>
       
      </asp:UpdatePanel>
      </td>
     </tr>

Answer 7

参考：
http://www.cnblogs.com/insus/archive/2011/07/04/2097059.html动画效果(刷新页面可让动画重新开始)

Answer 8

应该是JS有问题，比如取值时没有判断空选，先前Append进去的选项没有Clear...

Answer 9

不是 我都已经判断了 我找到原因了 是因为我程序读数据库用的AJXA读的 所以 如果选择的过快 会导致 上一次的 没读完 下一次就开始读 JS运行混乱 但如果弹出ALERT就没有问题了 他有个时间差了这个问题要怎么解决啊

Answer 10

代码奉上  想研究的自己拿去研究吧 呵呵 我解决了 设置了setTimeout('city2()',500);
这个 有个时间间隔 就好了 function city1() {
    var mycity1 = document.getElementById("City1");
    document.all.City1.disabled = true;
    
    var City1_text = "";
    City1_text = mycity1.options[document.getElementById("City1").options.selectedIndex].text;
   
    var xmlHttpcate = createXmlHttp();
    var url = "CityOnChange.aspx?Provinces=" + City1_text + "&tab=X_City2"; //发送请求的页面。在该页面返回所需的
    xmlHttpcate.open("GET", url, true); //打开
    xmlHttpcate.onreadystatechange = city1Result; //处理
    xmlHttpcate.send(null);
    setTimeout('city2()',500);
     
    document.all.City1.disabled = false;
}
function city2() {
    var City2_text = "";
    City2_text = document.getElementById("City2").options[document.getElementById("City2").options.selectedIndex].text;
   
    var xmlHttpcate = createXmlHttp();
    var url = "CityOnChange.aspx?Provinces=" + City2_text + "&tab=X_City3"; //发送请求的页面。在该页面返回所需的
    xmlHttpcate.open("GET", url, true); //打开
    xmlHttpcate.onreadystatechange = city2Result; //处理
    xmlHttpcate.send(null);
   
}
 
//创建XHR
function createXmlHttp() {
    //非IE
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
        if (xmlHttp.overrideMimeType) {
            xmlHttp.overrideMimeType("text/xml");
        }
    }
    //IE
    else if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    if (!xmlHttp) {
        window.alert("你的浏览器不支持创建XMLhttpRequest对象");
    }    return xmlHttp;
}
//实现
var kiba2 = 1;
var kiba3 = 1;
//处理过程
function city1Result() {
    if (xmlHttp.readyState == 4) {
        
        if (xmlHttp.status == 200) {
            var sel = 0;
            var text= document.getElementById('CityValue2').value;
            if (kiba2 == 1 && text!="") {
                sel = 1;
                kiba2 = 0;
            }
            var con = xmlHttp.responseText;
            var city = document.getElementById('City2');
            city.length = 0;
            var str = con.split(';');
            for (var i = 0; i < str.length; i++) {
                if (str[i] != "") {
                    city.options[i] = new Option(str[i], str[i]);
                    if (sel == 1 && str[i] == text) {
                        city.options[i].selected = true;
                    }
                }
            }
                   }
        else if (xmlHttp.status == 404) {
            alert(xmlHttp.responseText);
        }
    }
}
//处理过程
function city2Result() {
    if (xmlHttp.readyState == 4) {        if (xmlHttp.status == 200) {            var sel = 0;
            var text = document.getElementById('CityValue3').value;
            if (kiba3 == 1 && text != "") {
                sel = 1;
                kiba3 = 0;
            }
            var con = xmlHttp.responseText;
            var city = document.getElementById('City3');
            city.length = 0;
            var str = con.split(';');
            for (var i = 0; i < str.length; i++) {
                if (str[i] != "") {
                    city.options[i] = new Option(str[i], str[i]);
                    if (sel == 1 && str[i] == text) {
                        city.options[i].selected = true;
                    }
                }
            }
            
        }
        else if (xmlHttp.status == 404) {
            alert(xmlHttp.responseText);
        }
    }
}