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

简单来说就是需要实现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. Python标准库之logging模块

    很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式的日志,loggin ...

  2. How to Install Oracle Java 11 on Ubuntu 18.04 LTS (Bionic) Written by Rahul, Updated on April 3, 20

    本文系转载备份 请阅读点击下面链接阅读原文以获取更佳地阅读体验.谢谢. How to Install Oracle Java 11 on Ubuntu 18.04 LTS (Bionic) Writt ...

  3. react-React深入-一等公民-props-onChange

    title: '[react]深入 - 一等公民 props & onChange' date: 2017-08-23 10:05:07 tags: react reactjs props o ...

  4. react-绑定this并传参的三种方式

    绑定this并传参的三种方式 在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...

  5. SVN之TortoiseSVN使用02

    TortoiseSVN常用操作和安装eclipse的svn插件 一.关于TortoiseSVN的介绍 1. 安装TortoiseSVN图像化操作软件,便于操作SVN! 如图有两种版本的,一个是32位, ...

  6. MVC理解(全程白话不拽词)

    我所发的所有博客只为了给想干程序员,但是基础没有或者很差,刚入职场的人 所有的观点不一定准确,我不懂的或者不理解的都会备注出来 先说MVC MVC理解为:M  =  Model  =  数据库表里面每 ...

  7. Python TCP与UDP的区别

    TCP:英文全拼(Transmission Control Protocol)简称传输控制协议,它是一种面向连接的.可靠的.基于字节流的传输层通信协议. TCP通信需要经过创建连接.数据传送.终止连接 ...

  8. django Warning: (3135, "'NO_ZERO_DATE', 'NO_ZERO_IN_DATE' and 'ERROR_FOR_DIVISION_BY_ZERO' sql modes

    django连接数据库配置设置如下 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'test2', ...

  9. Python开发坦克大战

    Python不仅能开发网站,爬虫数据分析等,他其实也可以写游戏,接下来就给大家分享下坦克大战的代码: PS:很多人在学习Python的过程中,往往因为遇问题解决不了或者没好的教程从而导致自己放弃,为此 ...

  10. Tomcat的使⽤

    准备 1.官⽹地址:http://tomcat.apache.org下载. 2.解压文件,并放到指定路径,给该文件授权. chmod -R 755 3.启动和停止 进入到/Users/lucas/Do ...