php select事件模型,select：联动+change事件（数据从后台获取）总结

这里我用的是bootstrap框架，所以有些是引用的bootstrap的类，非boostrap开发可以省略。

HTML代码：

please choose your favorites fruit

IDNameaddress

一、只有一个select时：

JQuery代码：

$(document).ready(function)(){

$.getJSON("SelectData URL here",function(data1){//this is for getting option values

for(var i = 0; i

//data is the name from php(open PHP URL in browers)

$('.selectbox').append(''+

data1['data'][i].name+'');//set up option's values

}

});

$('.selectbox').change(function(){

var selectBox1 = $('.selectbox').val().trim();

$('tbody').empty();

$.getJSON("TableData URL here",{selectbox1:ID1},function(data2){

//ID1 is the data match with checked option's values

for(var j = 0; j

$('tbody').append("

"+data2['data'][j].ID+

"+data['data'][j].name+

"+data['data'][j].address+"");

}

});

})

});

二、select二级联动+刷新

select二级联动跟只有一个select的时候差不多，只需要做一点小小的改动——在change事件下加一行代码：

$('.selectbox').change(function(){

var selectBox1 = $('.selectbox').val().trim();//the first selectbox

var selectBox2 = $('.selectbox2').val.trim();//the second selectbox

$('tbody').empty();

$.getJSON("TableData URL here",{selectBox1:ID1,selectBox2:ID2},function(data2){

//about ID1 & ID2,this you can get from URL in the end of URL,such as: ?ID=1

for(var j = 0; j

$('tbody').append("

"+data2['data'][j].ID+

"+data['data'][j].name+

"+data['data'][j].address+"");

}

});

})

});

知道了一级联动和二级联动的做法，不难知道多级联动应该怎么做。

这是我第一次做select联动，如果有问题，欢迎大家交流。

php select事件模型,select：联动+change事件（数据从后台获取）总结相关推荐

vue下拉框值改变事件_vue下的@change事件
楼主最近在项目中实践了一下vue,期间遇到了一些坑,现在记录一下先上代码 Title 请选择 {{province.text}} 请选择 {{city.text}} new Vue({ el:'#a ...
bootstrap select多选的change事件
bootstrap select的插件多选会自己生成新的DOM,所以绑定在原来select上的change事件不会触发. //bootstrap select插件多选的change事件 $('#fc_ ...
事件模型、事件流（冒泡与捕获）、事件代理
本文原链接:https://www.cnblogs.com/hngdlxy143/p/9068282.html https://www.jb51.net/article/139997.htm 事件模型 ...
js 事件模型 + ( 事件类型 )
Dom事件事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信.DOM支持大量的事件 (一) EventTarget接口 DOM的事件操作(监听和触发),都定义在EventTarget接 ...
nginx进程模型，事件模型
众所周知,nginx性能高,而nginx的高性能与其架构是分不开的.那么nginx究竟是怎么样的呢?这一节我们先来初识一下nginx框架吧. nginx在启动后,在unix系统中会以daemon的方式 ...
DOM（四）——事件、事件模型（冒泡）与事件对象的功能
文章目录一.事件二. 事件绑定 1. 在HTML中手工绑定 2. 在js中以赋值方式绑定 3. 在js中以添加事件监听对象的方式绑定: 3.1 原理 3.2 移除事件监听对象三.事件模型四.事 ...
.NET 事件模型教程（一）
.NET 事件模型教程(一) .code { padding: 10px 10px 10px 10px; font-family: 宋体; background-color: #ececec } 目录 ...
行为模型实例 php,JS中事件模型的实例详解
之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始 ...
input 中文输入法额外触发change事件问题
用ant mobile input 组件实现下面输入提示,提示添加click事件,input 添加change事件. 预期:点击提示项的时候,预期是只触发click事件. 实际:英文输入法正常,只触发 ...
JavaScript 事件模型事件处理机制
这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们 ...

php select事件模型,select：联动+change事件（数据从后台获取）总结

php select事件模型,select：联动+change事件（数据从后台获取）总结相关推荐

最新文章

热门文章