一个实例 ---灵活使用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');