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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
简单理解vue中Props属性
Oct 27 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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如何利用P3P实现跨域
2013/08/24 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
用友笔试题目
2016/10/25 面试题
实习评语
2013/12/16 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
高一数学教学反思
2014/02/07 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers