0

我有一个用于设置用户位置的 ajax 脚本，表单输入是

<select id="region" onchange="city('/ajax-city.php')" ...>
   <option>

<select ..\>
   <option...>

当第一个选择列表中的一个选项发生更改（onchange）时，将向服务器发送 ajax 请求并处理响应并<select>更新第二个选项。

这是用于更新的函数<select>

var city = function(page)
{
    if(xhro){ // stands for Xml Http Request Object
      var fv = document.getElementById('region').value;
      var obj = document.getElementById('city-element');
      obj.innerHTML="<span style=\"display:block; width:200px; float:right; padding:0 10px 10px 0; font-family:Tahoma; font-size:12px;\"> please wait.. </span>";
      xhro.open("POST",page);
      xhro.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      xhro.onreadystatechange = function()
      {
        if(xhro.readyState==4 && xhro.status==200)
        {
            obj.innerHTML = "<select name=\"city\"  onchange=\"subcity('ajax-subcity.php')\" id=\"city\" >"+xhro.responseText+"</select>";
        }
      }
      xhro.send("city=" + fv);
}

如您所见，我的函数添加了 onchange 属性，以便在<select name="city">触发 onchange 事件时发送另一个 ajax 请求，但是当我单击下一个选项时<select name="city">，在 firebug 的控制台中我收到此错误

subcity is not a function

subcity("ajax-subcity.php");

当我在控制台中键入该函数时，firebug 会识别它，我认为当 ajax 请求更新 DOM 元素时，事件不会像页面正常加载时那样处理。

但这只是一个建议，考虑到该函数city()已被处理并更新<select name="city>"，但在下一个级别（subcity()）中没有更新发生

并且创建<option ..>s 是使用 php 脚本完成的。

它认为问题不在 subcity() 函数中，因为它在 firebug 中工作 BTW 很高兴被提及。

var subcity = function(page){
alert("problem solved");
if(xhro){
    var fv = document.getElementById('city').value;
    var obj = document.getElementById('subcity-element');
    obj.innerHTML="<span style=\"display:block; width:200px; float:right; padding:0 10px 10px 0; font-family:Tahoma; font-size:12px;\"> please wait</span>";
    xhro.open("POST",page);
    xhro.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhro.onreadystatechange = function(){
        if(xhro.readyState==4 && xhro.status==200){
            obj.innerHTML = "<select name=\"subcity\" id=\"subcity\" >"+xhro.responseText+"</select>";
        }
    }
    xhro.send("city=" + fv);
}
4

1 回答 1

2

我引用 ：

   if(xhro.readyState==4 && xhro.status==200){
            obj.innerHTML = "<select name=\"subsity\" id=\"subcity\" >"+xhro.responseText+"</select>";
        }

更改您在选择中使用的子城市ID，请使用“子城市”而不是“子城市”，否则它将覆盖您的子城市功能！

id 由 javascript 使用，这就是为什么它们必须是唯一的。，它不仅适用于 CSS。

编辑 ：

对城市和城市功能做同样的事情

PS：你的代码是一团糟，认真的！修理它。

于 2012-05-19T06:49:47.070 回答