如何使用AJAX在JavaScript中实现省市区三级联动功能？

三级联动js实现

使用ajax在javascript中实现省市区三级联动功能。

问题内容：

如何使用ajax在javascript中实现省市区三级联动？

立即学习“Java免费学习笔记（深入）”；

问题答案：

1. 创建xmlhttprequest对象：

   

   PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

   一键操作，智能生成专业级PPT

   37

   查看详情

   var obj = new xmlhttprequest();

   登录后复制

2. 打开请求：

   obj.open("get", "./sjld.php?fid=1");

   登录后复制

3. 设置响应函数：

   obj.onreadystatechange = function() {
     if (obj.readystate == 4 && obj.status == 200) {
    // 获取响应并解析json数据
    var flages = eval(obj.responsetext);
   
    // 清空select元素
    elc_1.innerhtml = "";
   
    // 遍历json数据并创建option元素
    for (var i = 0; i < flages.length; i++) {
      var opt = document.createelement('option');
      opt.text = flages[i].name;
      opt.value = flages[i].id;
      elc_1.appendchild(opt);
    }
     }
   };

   登录后复制

4. 发送请求：

   obj.send();

   登录后复制

5. 处理响应数据：

   • 解析json数据。
   • 清空select元素。
   • 遍历json数据并创建option元素，添加到select元素中。

示例代码：

<select name='prov' id='prov'></select>
<select name='市' id='city'></select>
<select name='区' id='area'></select>

<script type="text/javascript">
  var elc = document.getElementsByTagName('select');
  var elc_1 = elc[0];
  var obj = new XMLHttpRequest();
  obj.open("GET", "./sjld.php?fid=1");
  obj.onreadystatechange = function() {
    if (obj.readyState == 4 && obj.status == 200) {
      var flages = eval(obj.responseText);

      elc_1.innerHTML = "";

      for (var i = 0; i < flages.length; i++) {
        var opt = document.createElement('option');
        opt.text = flages[i].name;
        opt.value = flages[i].id;
        elc_1.appendChild(opt);
      }
    }
  };
  obj.send();
</script>

以上就是如何使用AJAX在JavaScript中实现省市区三级联动功能？的详细内容，更多请关注php中文网其它相关文章！