zoukankan      html  css  js  c++  java
  • 一个实例 ---灵活使用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');
  • 相关阅读:
    Codeforces 689A Mike and Cellphone
    栈的一些基本操作
    Intersecting Lines POJ 1269
    Segments POJ 3304 直线与线段是否相交
    Toy Storage POJ 2398
    CF471D MUH and Cube Walls
    P 3396 哈希冲突 根号分治
    P1445 [Violet]樱花
    P6810 「MCOI-02」Convex Hull 凸包
    P3455 [POI2007]ZAP-Queries
  • 原文地址:https://www.cnblogs.com/cl94/p/9606784.html
Copyright © 2011-2022 走看看