网站有时候需要这种联动然后获取到想对应的数据

思路：

这种的话就是你每次选择哪一个就将这个设置一个标注 表示你现在选择的是哪一个 然后每选择一次就进行一次ajax查询，ajax里面有一个data里面添加你现在的条件，获取到先对应的数据，
显示数据之前需要将对应显示数据的内容里面置空。
代码：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style>
  7.         .school,.data{height:30px;line-height:30px;border-bottom:1px solid #ccc;}
  8.         label{font-size:18px;floaT:left;}
  9.         .con{floaT:left;font-size:16px;}
  10.         .con .active{color:red;}
  11.         .con span{display:block;padding:0px 5px;float:left;cursor:pointer;}
  12.         .con span:hover{color:red;}
  13.         .content{width:100%;height:250px;border:1px solid red;}
  14.         </style>
  15.     </head>
  16.     <body>
  17.     <div style="width:400px;border:1px solid #ccc;">
  18.     <div class="school">
  19.         <label>人物</label>
  20.         <div class="con">
  21.             <span class="active" data-mark="">开始选择</span>
  22.             <span data-mark="周杰伦">周杰伦</span>
  23.             <span data-mark="蔡依林">蔡依林</span>
  24.             <span data-mark="bigbang">bigbang</span>
  25.             <span data-mark="sj">sj</span>
  26.         </div>
  27.     </div>
  28.     <div class="data">
  29.         <label>页码</label>
  30.         <div class="con">
  31.             <span class="active">1</span>
  32.             <span>2</span>
  33.             <span>3</span>
  34.             <span>4</span>
  35.             <span>5</span>
  36.         </div>
  37.     </div>
  38.     <div class="content"></div>
  39.     </div>
  40.     <script src="js/jquery-1.7.2.js"></script>
  41.     <script>
  42.     $(function(){
  43.         var length=$(".con").length;
  44.         for(var i=0;i<length;i++){
  45.             (function(index){
  46.                 $(".con").eq(index).find("span").click(function(){
  47.                     $(".con").eq(index).find("span").removeClass("active");
  48.                     $(this).addClass("active");
  49.                     //条件
  50.                     var json=select();
  51.  
  52.                     ajax(json.kw,json.pi);
  53.                 });
  54.             })(i);
  55.         }
  56.         //获取到标志的条件
  57.         function select(){
  58.             var s;//内容
  59.             var n;//条件
  60.             var l=$(".data span").length;
  61.             for(var i=0;i<l;i++){
  62.                 var c=$(".data span").eq(i).attr("class");
  63.                 if(c=="active"){
  64.                     n=$(".data span").eq(i).text();
  65.                 }
  66.             }
  67.             var l=$(".school span").length;
  68.             for(var i=0;i<l;i++){
  69.                 var c=$(".school span").eq(i).attr("class");
  70.                 if(c=="active"){
  71.                     s=$(".school span").eq(i).attr("data-mark");
  72.                 }
  73.             }
  74.  
  75.             return {
  76.                 kw:s,
  77.                 pi:n
  78.             };
  79.         };
  80.         //ajax pi页码 pz页数
  81.         function ajax(s,n){
  82.             $.ajax({
  83.                 url:'http://cgi.music.soso.com/fcgi-bin/fcg_search_xmldata.q?source=4&w='+s+'字&perpage='+n+'&ie=utf-8',
  84.                 type:"GET",
  85.                 async: false,
  86.                 dataType:"jsonp",
  87.                 success:function(data){
  88.  
  89.                     $(".content").empty();
  90.                     for(var i=0;i<data.list.length;i++){
  91.                         var result=data.list[i];
  92.                         var odiv='<span style="font-size:18px;color:red">名字：'+result.albumname+'</span><span>流量'+result.interval+'</span></br>';
  93.                         $(".content").append(odiv);
  94.                     }
  95.                 }
  96.             })
  97.         };
  98.     });
  99.     </script>
  100.     </body>
  101. </html>
demo的地址：https://github.com/GainLoss/linkage-selection

联动选择通过ajax获取选择对应的数据的更多相关文章

  1. 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析

    使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析 因为我在前台使用了jquery的text()方法,而不是html ...

  2. Ajax获取 Json文件提取数据

    摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...

  3. 3..jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

  4. html基础：jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

  5. jquery+ajax获取本地json对应数据

    首先,记得导入jquery.js文件. json内容: var obj123=[        {"option":"2,3,9,14,19,24,32",&q ...

  6. AJAX获取JSON形式的数据

    test.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  7. 利用ajax获取网页表单数据，并存储到数据库之二（使用SSH）

    上篇介绍了如何使用JDBC链接ORACLE数据库实现对数据库的增删改查,本例是使用框架SSH来对数据库的数据进行操作. 首先说框架,现在流行的框架很多,如Struts.Hibernate.Spring ...

  8. 利用ajax获取网页表单数据，并存储到数据库之一（使用JDBC）

    所谓JDBC就是利用java与数据库相连接的技术,从数据库获取既有的信息或者把网页上的信息存储到数据库. 这里简单的介绍公司的一个小项目中的一部分,由于代码较多,所以用图片形式进行展示.源码请查看源码 ...

  9. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

随机推荐

  1. 51nod1035(循环节)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1035 题意:中文题诶- 思路:求满足 10^k=1(mod ...

  2. 强联通分量之kosaraju算法

    首先定义:强联通分量是有向图G=(V, E)的最大结点集合,满足该集合中的任意一对结点v和u,路径vu和uv同时存在. kosaraju算法用来寻找强联通分量.对于图G,它首先随便找个结点dfs,求出 ...

  3. [Xcode 实际操作]五、使用表格-(4)设置UITableView单元格数据库源

    目录:[Swift]Xcode实际操作 本文将演示如何自定义表格的数据来源. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加 ...

  4. android手机设备查看/data/data

    打开cmd 进入安卓 SDK的'Platform tools'   cd F:\software\adt-bundle-windows-x86_64-20130522\sdk\platform-too ...

  5. h5自定义播放器得实现原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 1、kubernetes系统基础190622

    1.容器编排工具 docker编排工具三剑客:docker compose, docker swarm, docker machine IDC的操作系统:mesos 提供容器编排框架:marathon ...

  7. xcode8.3 shell 自动打包脚本

    题记 xcode升级8.3后发现之前所用的xcode自动打包基本无法使用,因此在网上零碎找到些资料,将之前的脚本简化.此次脚本是基于xcode证书配置进行打包(之前是指定描述文件.相对繁琐).因此代码 ...

  8. 手写的select 下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和 ...

  9. Django 02 url路由配置及渲染方式

    Django 02 url路由配置及渲染方式 一.URL #URL #(Uniform Resoure Locator) 统一资源定位符:对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是 ...

  10. LDAP--对某些AD属性值是字节数组byte[]情况的类型转换方法

    //BitConverter.ToBoolean((searchResult.Properties["mDBUseDefaults"][0] as byte[]), 0); row ...