js 下拉层级多选_Jquery实现select二级联动多选下拉菜单
前言
平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解。这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动。更加麻烦的是,我需要完成以下操作,以省、市二级联动菜单为例:
选择河北省 >> 二级菜单显示河北省所有市 >> 多选其中石家庄、邢台、保定
再选择河南省 >> 二级菜单显示河南省所有市 >> 多选其中驻马店、郑州
...
重复以上步骤
也就是说我要同时选择多个省内的多个市,而简单的二级联动菜单貌似无法完成这个步骤,所以便有了如下方案:
demo.png
在点击添加后,在下拉菜单结果中,会保存已经被选中的选项。之后,我们便可以修改大类中的选项,实现小类中的再次多选
实现代码
JS代码
function getSelectVal() {
//获取后台json数据
$.getJSON("server.php", {
bigname: $("#bigname").val()
}, function(json) {
var smallname = $("#smallname");
$("option", smallname).remove(); //清空原有的选项
$.each(json, function(index, array) {
var option = "" + array['title'] + "";
smallname.append(option);
});
});
}
// 选择上级菜单选项触发事件
$(function() {
getSelectVal();
$("#bigname").change(function() {
getSelectVal();
});
});
//点击添加,获取选中选项的value和text
$(document).ready(function() {
$("#add").click(function() {
var result = $("#result");
$("#smallname option:selected").each(function(){
console.log($(this).val() + $(this).text());
var option = "" + $(this).text() + "";
result.append(option);
});
});
});
大类:
编程技术
社交网站
好吃的
小类:
添加
结果:
模拟数据库返回数据的后台文件
$bigid = $_GET["bigname"];
if(isset($bigid)){
if($bigid == 1){
$select = array(
'0' => ['id' => 1,'title' => 'JS'],
'1' => ['id' => 2,'title' => 'PHP'],
'2' => ['id' => 3,'title' => 'C++'],
'3' => ['id' => 4,'title' => 'LUA'],
'4' => ['id' => 5,'title' => 'CSS'],
);
}else if($bigid == 2){
$select = array(
'0' => ['id' => 1,'title' => '人人'],
'1' => ['id' => 2,'title' => 'FACEBOOK'],
'2' => ['id' => 3,'title' => '微博'],
'3' => ['id' => 4,'title' => '朋友圈'],
'4' => ['id' => 5,'title' => '空间'],
);
}else if($bigid == 3){
$select = array(
'0' => ['id' => 1,'title' => '牛肉面'],
'1' => ['id' => 2,'title' => '土豆粉'],
'2' => ['id' => 3,'title' => '盖饭'],
'3' => ['id' => 4,'title' => '火锅'],
'4' => ['id' => 5,'title' => '大便'],
);
}
echo json_encode($select);
}
js 下拉层级多选_Jquery实现select二级联动多选下拉菜单相关推荐
- php 下拉菜单多选get,Jquery实现select二级联动多选下拉菜单
前言 平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解.这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动.更加麻烦的是,我需要完成以下操作,以省.市二级联动菜单为例: 选 ...
- javascript实现下拉条联动_js实现select二级联动下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 String path = request.getContextPath(); String basePath = ...
- JSjQuery全选反选父项子项联动多选框
全选反选父项子项联动多选框 js代码:<!DOCTYPE html><html lang="en"><head> <meta charse ...
- html省市多级联动下拉框,基于javascript实现全国省市二级联动下拉选择菜单
本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: 无标题文档 //好像不是这样子 var arr_province = ["请选择省 ...
- select二级联动价格策略+js的eval()
eval()函数,曾经自己并不觉得怎么样,但是项目中遇到一个需求,被迫使用,感觉确实很强大,记下来,忘了了看看! 需求: 1) 省内价格可用精确到地市(即,区号),省外价格只精确到省. ...
- ajax实现数据库获取select二级联动下拉菜单
HTML内容: <li><span>一级分类:</span><select name="yjid" class="yjid&qu ...
- element 下拉框联动_element-ui select 二级联动
在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同) 两个输入框代码 v-for="item in select1&qu ...
- 添加数据+二级联动+全选删除
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- vue.js 默认选中select_vue select二级联动第二级默认选中第一个option值的实例
当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 所在区域 {{item.country}} {{item}} d ...
最新文章
- 三星电池正在获取使用模式_三星Galaxy S10系列超大电池持久动力,解决电量烦恼...
- MapReduce-流量统计求和-排序-Mapper和Reducer编写
- python作业题目用户输入行数、输出倒的等腰三角形_智慧职教云课堂APPPython程序设计(常州工业职业技术学院)作业期末考试答案...
- jax-rs jax-ws_您的JAX-RS API并非天生就等于:使用动态功能
- BZOJ 1232 USACO 2008 Nov. 安慰奶牛Cheer
- Web前端JavaScript笔记(2)字符串
- 第一个DFS,第一个递归 HDU1515
- idea中git的运用
- BNU10782被诅咒的代码
- 如何用VB开发游戏外挂
- 【每周论文阅读-第四周】proposal-level 特征聚合视频目标检测方法01
- 微信小程序开发——websocket(socket在线测试服务器,或本地socket服务器)
- 将solidworks建的机器人模型导入到ros中
- 2008服务器系统初始密码,2008服务器地址和密码
- 数据模型及E-R模型
- 出现这些情况,裸辞不是找虐,是解脱!
- GMap.net 地图展示以及地图标记
- python语言变量名规则_python语言变量命名规则
- java file mac ox_MAC OX 配置JDK环境变量
- 实践报告抽象类java_java抽象类不能实例化实践是检验真理的唯一标准
热门文章
- Word2019版_去掉文档中的回车符
- 怎么生成永久二维码?怎么做出长期有效的图片二维码?
- 震为雷:始于足下;艮为山:红灯刹车
- soul网关系列(六):客户端注册soul流程分析
- 【详细教程】App inventor连接阿里云平台(APP显示STM32发来的温湿度数据等)
- 薛老师软考高项学员:2016年4月11日作业
- CodeForces 858C Did you mean... 、 CodeForces 858D Polycarp's phone book!黑科技
- L1-023 输出GPLT Python 团体程序设计天梯赛-练习集
- 超级计算机 人脑,世界第4超级计算机竟被人脑秒成渣,人类的大脑究竟多厉害?...
- Blender_8_内插面