jQuery添加options点击事件并传值实例代码


Posted in Javascript onMay 18, 2016

 说明:

最近刚接了一个项目,其中有项目需求要求根据选择不同店铺选项,上送不同id值,展示不同商品列表

先给大家展示下实现效果图:如果大家感兴趣对此很感兴趣,可以参考下实现代码。

jQuery添加options点击事件并传值实例代码

var formStr = "{'supplierId':'供应链企业|%-jm-sprt-%|93794498-3'}";
$.ajax({
type : "post",
dataType : "json",
cache : false,
url : "../../../webservice/gmall.json", // 提交到一般处理程序请求数据
data :"businessCode=61001001&message="+encodeURI(formStr).replace(/\+/g, "%2B"),
async : false,
error : function() {
//alert("connection error!!!");
layer.alert("数据加载失败,请及时联系管理员!",0);
},
success : function(data) {
var dataJson = strToJson(data.msg);
var shopname = dataJson.body.gmPage;
if(dataJson.head.status=='000000'){
$.each(shopname,function(i,item){
$("#store").append("<option id='"+item.id+"' value='"+item.shopType+"' title='"+item.name+"'>"+item.name+"</option>");
})
$("select").on('click',function (){
var opt = $(this).children('option:selected');
var shopId = $(opt).attr('id');
var shopType = $(opt).val();
var formStrshop = " {'shopId':"+shopId+",'shopType':"+shopType+"}";
if($("option").val()==''){
$("#tb").empty();
}
$.ajax({
type : "post",
dataType : "json",
cache : false,
url : "../../../webservice/gmall.json", // 提交到一般处理程序请求数据
data :"businessCode=61001003&message="+encodeURI(formStrshop).replace(/\+/g, "%2B"),
async : false,
error : function() {
layer.alert("数据加载失败,请及时联系管理员!",0);
},
success : function(data) {
var dataJson = strToJson(data.msg);
var shopname = dataJson.body.gmPage;
if(dataJson.head.status=='000000'){
$.each(shopname,function(i,item){
var attributeValue11 = dataJson.body.gmPage[i].attributeValue11;
$("#tb").empty();
$("#tb").append("<tr id='"+item.id+"'>" 
+"<td><input type='checkbox' value='"+item.id+"' name='price'/></td>"
+"<td>"+item.sn+"</td>"
+"<td>"+item.name+"</td>"
+"<td>"+item.attributeValue11+"</td>"
+"<td><input type='text' name='discount' class='text' style='width:100px'/></td>"
+"<td>"+0+"</td></tr>"
); 
})
} 
}
});
})
}
}
});

简单示例

<select name="" id="">
<option value="1" id="1">123</option>
<option value="2" id="2">gfg</option>
<option value="3" id="3">ds3</option>
<option value="4" id="4">1fgtr3</option>
<option value="5" id="5">6y3</option>
<option value="6" id="6">1fbnh3</option>
<option value="7" id="7">1vdf3</option>
</select>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(function(){
$('select').on('click',function(){
// $(this).on('click',function(){ 此步可省略,无需管option的点击事件
var $opt = $(this).children('option:selected');

 console.log($($opt).attr('id'),$($opt).val(),$($opt).html());
// })
})
})
</script>

以上所述是小编给大家介绍的jQuery添加options点击事件并传值实例代码的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
基于javascript编写简单日历
May 02 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 #Javascript
深入剖析javascript中的exec与match方法
May 18 #Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 #Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 #Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 #Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 #Javascript
JQuery解析XML数据的几个简单实例
May 18 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php防注
2007/01/15 PHP
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
js实现的map方法示例代码
2014/01/13 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
Python的Tornado框架异步编程入门实例
2015/04/24 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Django实现表单验证
2018/09/08 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python实现自动化上线脚本的示例
2019/07/01 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
优秀演讲稿范文
2013/12/29 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
学子宴致辞大全
2015/07/27 职场文书