标题可能不是很清晰,我们看实例:

简单来说就是需要实现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传递对象到后台控制器的更多相关文章

  1. jquery选择器从认识到使用初级篇

    1.   .class 选择器 ---一种通过元素类别属性查找元素 调用格式: $(".class") ----其中参数表示元素的css类别名称(类选择器)<input cl ...

  2. 锋利的jQuery ——jQuery选择器(二)

    一.jQuery选择器 1)CSS选择器 CSS选择器有:1>标签选择器  E{CSS规则} 2>ID选择器   #ID{CSS规则} 3>类选择器  E.className{CSS ...

  3. jquery接触初级----jquery 选择器

    css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...

  4. Linux编程之《只运行一个实例》

    概述 有些时候,我们要求一个程序在系统中只能启动一个实例.比如,Windows自带的播放软件Windows Medea Player在Windows里就只能启动一个实例.原因很简单,如果同时启动几个实 ...

  5. wpf只运行一个实例

    原文:wpf只运行一个实例 在winform下,只运行一个实例只需这样就可以: 1. 首先要添加如下的namespace: using System.Threading; 2. 修改系统Main函数, ...

  6. C#让应用程序只运行一个实例的几种方法

    一 判断是否有相同的实例已经运行 1 根据“Mutex”判断是否有相同的实例在运行 /// <returns>已有实例运行返回true,否则为false</returns>pu ...

  7. 逆向学习XXclient怎样仅仅执行一个实例

    个人觉得学习分两种, 一种是当面请教和直接从书本网络中的资料学习. 其二就是看着令你惊叹的作品-顿悟. 什么?顿悟不了?那我们就一起来逆向学习吧!差点忘了,我并不打算提供Demo,这并不重要,难道你打 ...

  8. Winform中只运行运行一个实例的方法

    在Program类的main方法按如下代码编写即可 1 static void Main() 2 { 3 if (Process.GetProcessesByName(Process.GetCurre ...

  9. jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

随机推荐

  1. python3练习100题——056

    题目:画图,学用circle画圆形. 可以用turtle.circle画图. import turtle turtle.setup(0.6,0.6) turtle.pensize(3) turtle. ...

  2. PDF体检报告

    //Title: 个人健康管理分析报告 using System; using System.Collections.Generic; using System.Linq; using System. ...

  3. CSS的列表样式和网页背景

    CSS的列表样式 1. 设置title和列表 HTML: <!DOCTYPE html><html lang="en"><head>    &l ...

  4. 假期学习【四】RDD编程实验一

    1.今天把Spark编程第三个实验的Scala独立程序编程写完了.使用 sbt 打包 Scala 程序,然后提交到Spark运行. 2.完成了实验四的第一项 (1)该系总共有多少学生:   map(t ...

  5. yum装包报错

    [root@iZ6wefn2kl6064uuaxuwetZ ~]# yum –y install  gcc  pcre-devel zlib-devel openssl-develLoaded plu ...

  6. BZOJ4710: [Jsoi2011]分特产 组合数学 容斥原理

    题意:把M堆特产分给N个同学,要求每个同学至少分到一种特产,共有多少种分法? 把A个球分给B个人的分法种数:(插板法,假设A个球互不相同,依次插入,然后除以全排列去重) C(A,B+A) 把M堆特产分 ...

  7. LED Keychain: Timeless Business Gift

    Every business owner understands the importance of reducing marketing budgets and investing in sales ...

  8. wso2 linux上部署说明

    1.启动wso2

  9. (转)java中新生代和老年代

    转自:http://blog.csdn.net/lojze_ly/article/details/49456255 聊聊JVM的年轻代 1.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不 ...

  10. 测度论--长度是怎样炼成的[zz]

    http://www.58pic.com/newpic/27882296.html http://www.58pic.com/newpic/27893137.html http://699pic.co ...