这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js select 下拉联动的相关资料,更具级联性! 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
之前有过记录,select 下拉联动 (Bootstrap、JQuery 插件之 cxselect)区别在这个级联性更强。
html 源码:
- <!DOCTYPE html>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- </head>
- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
- </script>
- <script type="text/javascript" src="USjs.js">
- </script>
- <body>
- <div class="container">
- <table>
- <tr>
- <td>
- 厂商:
- </td>
- <td>
- <select id="selF">
- <option>
- 请选择
- </option>
- </select>
- </td>
- <td>
- 品牌:
- </td>
- <td>
- <select id="selT">
- <option>
- 请选择
- </option>
- </select>
- </td>
- <td>
- 型号:
- </td>
- <td>
- <select id="selC">
- <option>
- 请选择
- </option>
- </select>
- </td>
- <td>
- <input type="button" value="查询" id="Button1" class="btn" />
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
JS(USjs.js)源码: 在转载的基础上做了修改,特别是源数据 JSON 格式。
- $(function() {
- function objInit(obj) {
- return $(obj).html('<option>请选择</option>');
- }
- $.getJSON('data.json',
- function(json) {
- var arrData = json;
- $.each(arrData,
- function(pF, pV) {
- $('#selF').append('<option value="' + pF + '">' + pV.n + '</option>');
- });
- $('#selF').change(function() {
- objInit('#selT');
- objInit('#selC');
- $.each(arrData,
- function(pF, pS) {
- if ($('#selF option:selected').attr('value') == pF) {
- $.each(pS.s,
- function(pT, pC) {
- $('#selT').append('<option value="' + pT + '">' + pC.n + '</option>');
- });
- $('#selT').change(function() {
- objInit('#selC');
- $.each(pS.s,
- function(pT, pC) {
- if ($('#selT option:selected').attr('value') == pT) {
- $.each(pC.s,
- function(ii, vv) {
- $('#selC').append('<option value="' + ii + '">' + vv.n + '</option>');
- })
- }
- })
- });
- }
- })
- });
- }); //getJSON
- });
JSON(data.json)文件,
- [{
- "n": "厂商1",
- "s": [{
- "n": "品牌一",
- "s": [{
- "n": "型号1-1-1"
- },
- {
- "n": "型号1-1-2"
- }]
- },
- {
- "n": "品牌二",
- "s": [{
- "n": "型号1-2-1"
- },
- {
- "n": "型号1-2-2"
- }]
- }]
- },
- {
- "n": "厂商2",
- "s": [{
- "n": "品牌一",
- "s": [{
- "n": "型号2-1-1"
- },
- {
- "n": "型号2-1-2"
- }]
- },
- {
- "n": "品牌二",
- "s": [{
- "n": "型号2-2-1"
- },
- {
- "n": "型号2-2-2"
- }]
- }]
- },
- {
- "n": "厂商3",
- "s": [{
- "n": "品牌一",
- "s": [{
- "n": "型号3-1-1"
- },
- {
- "n": "型号3-1-2"
- }]
- },
- {
- "n": "品牌二",
- "s": [{
- "n": "型号3-2-1"
- },
- {
- "n": "型号3-2-2"
- }]
- }]
- }]
Find more from: /article/17/0427/328885.html
来源: http://www.phperz.com/article/17/0713/328887.html