在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--引用jquery代码包-->
<script src="../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>

<select id="nation"></select>

<body>

<script type="text/javascript">
$.ajax({
    url:"JSON_chuli.php", //url跳转到指定的处理页面
    dataType:"JSON", //返回JSON数据类型,返回的是二维数组
    success: function(data){
        var str ="";  //先定义一个空的数组str

        /*for(var i=0;i<data.length;i++){
            str = str+"<option value=‘"+data[i].Code+"‘>"+data[i].Name+"</option>";  //求data循环出来的索引[i],取出Code列,显示出循环出来的Name列

        }*/

        for(var s in data){ //定义一个变量 s代表索引 in data初始值,进循环才有值
            str = str+"<option value=‘"+data[s].Code+"‘>"+data[s].Name+"</option>"; //求data循环出来的索引[s],取出Code列,显示出循环出来的Name列

        }
        $("#nation").html(str); //$("")找到下拉,将求出来的Name列值放到下拉列表中

    }

});

处理页面

<?php

include("../DBDA.class.php");//include关键字,纯处理页面引用封装好类的代码包

$db = new DBDA();  //造一个接受对象关键字new

$sql = "select * from nation"; //访问数据库查询nation表所有数据

//json_encode()此方法需要关联数组
//使用json_encode数组内容的编码格式必须是 utf8的

echo json_encode($db->GuanQuery($sql));  //调用引用表里的关联函数GuanQuery

?>

效果

时间: 2024-10-19 10:39:25

在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据的相关文章

在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

bootstrap里的下拉菜单

bootstrap里的下拉菜单用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性.将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素.然后加入组成菜单的 HTML 代码.以下代码就是生成一个简单的下拉菜单 <div class="dropdown">  <button class="btn btn-default dropdown-togg

ajax实现级联下拉菜单

ajax实现级联下拉菜单非常简单,下面是一个用ajax实现的省市级联的下拉菜单: jsp中在<select>中添加onchange事件,触发该事件调用实现ajax的js: <div> <form action="Pcs" method="post"> 所在省:<select name="pro" id="pro" onchange="chCity();"> &

ajax三级联动下拉菜单

ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国地域: 北京的代号为11,那么子代号为11的便是北京时的市区, 也就是说根据主代号查询子代号: (3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端 显示页面非常简单,只需要一

[ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 一 ) - 传统下拉菜单

/** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.5 */ 说明:分析其他网站的图片较多,可以在目录跳过直接看本文 demo . 目录: 其他网站分析 亚马逊 淘宝 京东 当当 本文案例 demo1 demo2 [ 后面的博文再写 ] demo3 [ 后面的博文再写 ] 惯例,先看看他山之石,选择了四家比较大的电商网站:亚马逊.淘宝.京东.当当,看看它们的地址联动菜单是怎么做的. 1. 亚马逊[返回目录][下一节:淘宝] 图1 默认界面 说

【easyui-combobox】下拉菜单自动补全功能,Ajax获取远程数据源

这个是针对easyUI的下拉菜单使用的,Ajax获取远程数据源 HTML 页面 <input id="uname" name="uname" class="easyui-combobox" data-options="" style="width: 120px;" /> JS代码 $("#uname").combobox({ prompt:'输入首关键字自动检索', valu

SAP WebIDE一个和Destination相关的问题 - OData下拉菜单里的Destination从哪里来的

我今天做开发遇到一个问题: 我有trial和正式的SAP Cloud Platform账号各一个: 其中trial账号的webIDE连接到productive的CloudFoundry: productive账号的WebIDE也连接到productive的CloudFoundry: 我发现在我新建OData服务时,从Service url的下拉菜单里,选择不到我在SAP云平台里创建的Destination. 怎么感觉trial WebIDE取的Destination来自trial neo环境创建

ajax实现三级联动下拉菜单

先不要着急去实现功能,我们第一步首先要理清思路,想要实现三级联动,首先要有三个下拉框,然后点击第一个下拉菜单,可以联动到第二个,点击第二个联动到第三个,实现省市区的三级联动,用到的数据表如下: 为了以后可以随时拿出来用,我们先在主页面建立一个div叫sanji,然后用一个js页面来引用: 主页面引入Jquery和js: <title>无标题文档</title> <script src="jquery-3.2.0.min.js"></script

Ajax提高篇(7)Ajax实现简单的下拉框联动显示数据

页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)&