Question

我尝试使用数据库中的ajax输出数据我传递数据product_name和产品权重如何显示产品重量

现在我的输出

  <select>category</select> //after select category It will display product name
   <select>productname</select> //after select productname How can i display my product weight outof select tag

我想在选择product_name

后显示<span>product_weight</span>

这是我的AJAX电话。我尝试控制我的数据，我已经在我的数据中获得了product_weight。

  var op=" ";
                $.ajax({
                    type:'get',
                    url:'{!!URL::to('findProductName')!!}',
                    data:{'id':cat_id},
                    success:function(data){
                        // console.log('success');
                        console.log(data);
                        // console.log(data.length);
                        op+='<option value="0" selected disabled>chose product</option>';

                        for(var i=0;i<data.length;i++){
                            op+='<option value="'+data[i].id_p+'" name="id_p">'+data[i].product_name+data[i].product_weight+'</option>';
                        }


                        div.find('.productname').html(" ");
                        div.find('.productname').append(op);

                         // console.log(data.length);

                       },
                       error:function(){

                       }
                     });

这是我的HTML

<select style="width:50%;" class="productcategory" id="prod_cat_id"  name="id_c[]">
    <option value="0" disabled="true" selected="true">category</option>
    @foreach($category as $c)
    <option value="{{$c->id_c}}" name="id_c" id="id_c">{{$c->category_name}}</option>
    @endforeach
</select>
<select style="width:48%;" class="productname" name="id_p[]">
    <option value="0" disabled="true" selected="true"> productname</option>
</select>

这是我的追加jeavescript

<script type="text/javascript">
var i = 0;
$(document).ready(function() {
    $('#add-form').click(function() {
        i++;
        $('#add-me').append(


            '<tbody id="row'+i+'"><tr>'+

            '<td class="col-md-7">'+
            '<select style="width:50%;" class="productcategory" id="prod_cat_id"  name="id_c['+ i +']"><option value="0" disabled="true" selected="true">category</option>@foreach($category as $c)<option value="{{$c->id_c}}" name="id_c[]" id="id_c[]">{{$c->category_name}}</option>@endforeach</select><select style="width:48%;" class="productname" name="id_p['+ i +']"><option value="0" disabled="true" selected="true"> product name</option></select>'
            +'</td>'
            +'<td class="col-md-1">'
            +'<div id="target_div_where_to_display_weight['+i+']" name="target_div_where_to_display_weight['+i+']">'
            +'</div>'
            +'<td class="col-md-1">'
            +'<input id="quantity" type="text" name="quantity_box[]" class="form-control"/>'
            +'</td>'
            +'<td class="col-md-1">'
            +'<input id="unit_price" type="text" name="unit_price[]" class="form-control"/>'
            +'</td>'
            +'<td class="col-md-1">'
            +'<input id="price" type="text" name="price[]" class="form-control"/>'
            +'</td>'

            +'<td class="col-md-2">'
            +'<button id="'+i+'" type="button" class="btn btn-danger delegated-btn">Delete</button>'
            +'</td>'
            +'</tr></tbody>'
            );

        $('button.btn.btn-danger').click(function() {
            var whichtr = $(this).closest("tr");
            whichtr.remove(); 
        });

    });
});

</script>

这是我的输出外观更新

Answer 1

您可以将product_weight存储在每个选项标记内的新标记属性中，例如＆＃34; data-weight＆＃34;。为了显示相应的重量，您只需要这样做：


    $("select.productname").on("change",function(){
        var weight = $(this).find(":selected").data("weight"); // .attr("data-weight");
        var span = "<span>"+weight+"</span>";
        $("#target_div_where_to_display_weight").html(span);
    });

<强>更新

在你的ajax请求中替换：

for(var i=0;i<data.length;i++){
    op+='<option value="'+data[i].id_p+'" name="id_p">'+data[i].product_name+data[i].product_weight+'</option>';
}

通过

for(var i=0;i<data.length;i++){
    op+='<option value="'+data[i].id_p+'" name="id_p" data-product_weight="'+data[i].product_weight+'">'+data[i].product_name+data[i].product_weight+'</option>';
}

并在我之前编写的代码中替换第一条指令：

var weight = $(this).find(":selected").data("product_weight"); // or .attr("data-product_weight");

更新2

如果您想要将每个产品的重量附加到div，则应如下所示：

首先，更改你的＆＃34;＃target_div_where_to_display_weight＆＃34; div由＆＃34;＆lt; div id =＆＃39; weights_wrapper＆＃39;＆gt;＆lt; / div＆gt;＆＃34;，然后更改第一个函数（在更改时）：

<pre>$("select.productname").on("change",function(){
    var prod = $(this).find(":selected"); // .attr("data-weight");
    var weight = prod.data("product_weight");
    var id_p = prod.val();
    var added_content = "";
    var content = "&#60;div class='weight' data-ip_p='"+id_p+"'>&#60;span>"+weight+"&#60;/span>"+added_content+"&#60;/div>";
    $("#weights_wrapper").append(content);
});</pre>

通过这种方式，您可以添加锚标记来管理每个重量块。例如，如果您想在添加重量后删除重量，则可以设置added_content =＆＃39;＆lt; a href =＆＃34;＃＆＃34;类=＆＃34; close_weight＆＃34;＆GT;＆LT; / A＆GT;＆＃39 ;;然后创建以下功能：

<pre>$("#weights_wrapper").on("click",".close_weight",function(){
    $(this).parent().remove();
});</pre>

使用ajax选择产品名称后显示数据

1 个答案: