一个实例 ---灵活使用jquery选择器实现input一个key,多个value 。 用ajax传递对象到后台控制器
标题可能不是很清晰,我们看实例:
简单来说就是需要实现sku的功能。。。一件商品可以有多个属性, 一个属性可以有多个值 。 最后以json格式存到数据库
难点一: 如何实现input输入框的弹性使用
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text sku_attribute_input" > <a href="javascript:void(0);" onclick="addinput(this)">+增加选项</a>
</div>
初始化是一个input,input下面有个a菜单,每次点击,触发jquery, 在a菜单之前增加一个input
function addinput(obj){
var html = '<input type="text" class="input-text" id="" name="name">';
$(obj).before(html);
}
难点二: 如何获取input的值
一个属性旁边都有一个复选框,我们用强大的jquery得到($('input:checkbox[class=check_sku_attribute]:checked'))所有勾选的复选框,
然后遍历它们,得到属性名($(this).parent().text()) 和 所有属性值集合($(this).parent().next().children())
考虑到,一个属性对应多个值 ,应该使用js对象来存储(之前使用数组,浪费了很多事件,原来js数组不能自定义索引)
$('input:checkbox[class=check_sku_attribute]:checked').each(function(){ var name = $(this).parent().text(); var sku = new Array();
//遍历字节点
$(this).parent().next().children().each(function(){
if($.trim($(this).val())!=''){
sku.push($(this).val());
}
}); if(sku.length!==0){
sku_attrubute[name] = sku;
} }); console.log(sku_attrubute);
之后用$.post 传输这个对象即可,over
$.post("{:url('product/product_attribute_addcl')}",{id:id,attribute:attrubute,sku_attrubute:sku_attrubute},function(data){ if(data.ok=='1'){
alert(data.message);
parent.location.reload();
}else{
alert(data.message);
}
},'json');
一个实例 ---灵活使用jquery选择器实现input一个key,多个value 。 用ajax传递对象到后台控制器的更多相关文章
- jquery选择器从认识到使用初级篇
1. .class 选择器 ---一种通过元素类别属性查找元素 调用格式: $(".class") ----其中参数表示元素的css类别名称(类选择器)<input cl ...
- 锋利的jQuery ——jQuery选择器(二)
一.jQuery选择器 1)CSS选择器 CSS选择器有:1>标签选择器 E{CSS规则} 2>ID选择器 #ID{CSS规则} 3>类选择器 E.className{CSS ...
- jquery接触初级----jquery 选择器
css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...
- Linux编程之《只运行一个实例》
概述 有些时候,我们要求一个程序在系统中只能启动一个实例.比如,Windows自带的播放软件Windows Medea Player在Windows里就只能启动一个实例.原因很简单,如果同时启动几个实 ...
- wpf只运行一个实例
原文:wpf只运行一个实例 在winform下,只运行一个实例只需这样就可以: 1. 首先要添加如下的namespace: using System.Threading; 2. 修改系统Main函数, ...
- C#让应用程序只运行一个实例的几种方法
一 判断是否有相同的实例已经运行 1 根据“Mutex”判断是否有相同的实例在运行 /// <returns>已有实例运行返回true,否则为false</returns>pu ...
- 逆向学习XXclient怎样仅仅执行一个实例
个人觉得学习分两种, 一种是当面请教和直接从书本网络中的资料学习. 其二就是看着令你惊叹的作品-顿悟. 什么?顿悟不了?那我们就一起来逆向学习吧!差点忘了,我并不打算提供Demo,这并不重要,难道你打 ...
- Winform中只运行运行一个实例的方法
在Program类的main方法按如下代码编写即可 1 static void Main() 2 { 3 if (Process.GetProcessesByName(Process.GetCurre ...
- jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...
随机推荐
- redis测试题
1.什么是Redis? Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到硬盘上进行保存. ...
- Ioc依赖注入:Unity4.0.1 在项目中的应用 (MVC和API)
使用Unity的好处网上有很多,百度一下即可 这里引用了一篇关于面向接口编程的好处的文章作为引申:https://blog.csdn.net/Cyy19970527/article/details/8 ...
- Vue组件库新增的prop属性类型是Object或者Array时默认值的设置
在Vue开发中提供组件库时常常需要添加相关属性,用来接收父组件向子组件传递的数据,通常也会给属性设置默认值,那么当属性的类型是Object或者Array类型时如何设置默认值比较合理呢?下面将揭晓这一过 ...
- 532-数组中的K-diff数对
532-数组中的K-diff数对 给定一个整数数组和一个整数 k, 你需要在数组里找到不同的 k-diff 数对.这里将 k-diff 数对定义为一个整数对 (i, j), 其中 i 和 j 都是数组 ...
- pytest参数化 parametrize
pytest.mark.parametrize装饰器可以实现测试用例参数化 parametrizing 1.这里是一个实现检查一定的输入和期望输出测试功能的典型例子 # content of test ...
- 虚拟机中的CentOS 7设置固定IP连接最理想的配置(转载)
来源:虚拟机中的CentOS 7设置固定IP连接最理想的配置(https://my.oschina.net/panhongju/blog/826814) 转载说明:这是我看了很多篇虚拟机静态IP配置写 ...
- [CQOI2012] 交换棋子 - 费用流
有一个n行m列的黑白棋盘,你每次可以交换两个相邻格子(相邻是指有公共边或公共顶点)中的棋子,最终达到目标状态.要求第i行第j列的格子只能参与mi,j次交换. Solution 一个点拆三份,入点,主点 ...
- Dataset: online data
From Kaggle: Appliances Energy Prediction Energy consumption of the Netherlands International Energy ...
- Facebook Create Done!
前天,又一次开了VPN,建立了自己的Facebook! Facebook我用邮箱注册的,注册邮箱在这里: acmit1966@outlook.com Facebook上我就叫做 Jack Deng 在 ...
- Your name ?
序言 才发觉自己有许多名字 ··································································· 言归正传 今天才发现,自己在不同地方 ...