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 Dialog 弹出层对话框插件
Aug 09 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
jquery滚动特效集锦
Jun 03 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
简单了解JS打开url的方法
Feb 21 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
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php实现监听事件
2013/11/06 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
解析Javascript单例模式概念与实例
2016/12/05 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python编程羊车门问题代码示例
2017/10/25 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
python安装twisted的问题解析
2018/08/21 Python
python多线程和多进程关系详解
2020/12/14 Python
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
大宝sod蜜广告词
2014/03/21 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
企业宣传工作方案
2014/06/02 职场文书
七一党日活动总结
2014/07/08 职场文书
2014年团支书工作总结
2014/11/14 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
幼儿园大班教学反思
2016/03/02 职场文书