1 效果图

2 html


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>二级联动下拉框</title>

    <script src="../js/lib/jquery-3.2.1.min.js"></script>

</head>

<body> 

    <div>

        <label>商品分类：</label>

        <select id="select-1" style="width:100px;">

        <option>--请选择--</option>

        </select>

        </div>

        <div  style="margin-top:10px;">

        <label>具体商品：</label>

        <select style="width:100px;" id="select-2">

        <option>--请选择--</option>

        </select>

        </div>

        <script src="../js/option.js"></script>

</body>

</html>

3 jq


$(function(){

    var arr1 = ['食材','家居','电子产品'];

    var arr2 = [['蔬菜','水果','调料'],['沙发','电池炉','冰箱'],['电脑','手机','充电宝']];

    for(let i=0;i<arr1.length;i++){

    $('#select-1').append('<option>'+arr1[i]+'</option>');

    }

    $('#select-1').change(function(){

    $('#select-2').children().not(':eq(0)').remove();

    var index = $(this).children('option:selected').index();

    var arr = arr2[index-1];

    for(let i=0;i<arr.length;i++){

    $('#select-2').append('<option>'+arr[i]+'</option>');

    }

    })

    })

4 总结

,children();//获取当前选中元素的一级子元素

.change();//绑定元素改变的处理函数

.not();//从选中集合中剔除选中的元素，not里面放筛选条件

jq实现简单的二级联动下拉框的更多相关文章

  1. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  2. JQ与AJAX 省市区三级联动下拉框

    用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...

  3. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  4. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  5. SharePoint 2013 使用查阅项实现联动下拉框

    SharePoint列表使用中,经常会用到下拉框,而有些特殊的需求,会用到联动的下拉框,在SharePoint中默认没有这样的字段,所以如果实现,我们需要自己想办法. 这里,我们介绍如何使用JQuer ...

  6. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  7. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  8. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. javascript实例学习之一——联动下拉框

    经常碰到这样的需求,如省市_城市_乡镇下拉框.后一个下拉框的内容会根据前一个的改变而改变,之前的解决方法往往是在前一个改变的时候,向后台发送请求临时获取对应的内容.这样每触发一次就会网络请求一次,这种 ...

随机推荐

  1. 【Java】访问mysql数据库视图

    数据库连接Connect: package cn.hkwl.zaxq.mysql; import java.sql.Connection; import java.sql.DriverManager; ...

  2. JVM Java字节码的角度分析switch的实现

    目录 Java字节码的角度分析switch的实现 引子 前置知识 一个妥协而又枯燥的方案 switch的实现 回顾历史 字节码分析 其他实现方式? Java字节码的角度分析switch的实现 作者 k ...

  3. 索引的底层实现（B 树）

    一.B 树 1.B-Tree介绍 B-树的搜索,从根结点开始,对结点内的关键字(有序)序列进行二分查找,如果命中则结束,否则进入查询关键字所属范围的儿子结点:重复,直到所对应的儿子指针为空,或已经是叶 ...

  4. LeetCode初级算法--数组02：旋转数组

    LeetCode初级算法--数组02:旋转数组 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net/ ...

  5. Be Nice！要善良

    [1]  It is nice to be important, but it is more important to be nice. [2]  What simple act of kindne ...

  6. 介绍ArcGIS中各种数据的打开方法——mxd（地图文档）

    1.加载地图文档 在ArcGIS中,以mxd作为扩展名的文件叫地图文档. 地图文档中只是包含图层的引用,即存储当前地图的图层路径.符号.状态.修饰等信息,并不存储真实的数据层. ArcGIS Map中 ...

  7. Redis 3.0中文版学习(二)

    网址:http://wiki.jikexueyuan.com/project/redis-guide/entry-to-master-middle.html 1.Redis的列表: 采用链表的实现方法 ...

  8. [Luogu3554] Poi2013 Triumphal arch

    Description Foreseeable和拿破仑的御用建筑师让·夏格伦在玩游戏 让·夏格伦会玩一个叫“凯旋门”的游戏:现在有一棵n个节点的树,表示一个国家 1号点代表这个国家的首都 这个游戏由两 ...

  9. Tensorflow从开始到放弃（技术篇）

    在gpu中运行 tf.device("/gpu:1") 有时候这个是会出问题的,即便你在有名称为1的gpu时.有的操作是不能支持gpu的,应该为session添加一些配置: pyt ...

  10. 【RabbitMQ 实战指南】一 死信队列

    1.死信队列 DLX,全称为 Dead-Letter-Exchange,可以称之为死信交换器.当消息在一个队列中变成死信(dead message)之后,它能被发送到另一个交换器中,这个交换器就是DL ...