Question

我有数据

{product_name: "mushroom", id_p: 13, product_weight: "5", product_unit: "kg"}

选择产品名称

后如何显示product_weight

 <td class="col-md-7">
    <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"> product</option>
    </select>
</td>
<td class="col-md-1">
    <div id="weights_wrapper" class="productweight" >
    </div>
</td>

我想在weight_warpper中输出productweight

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-product_unit="'+data[i].product_unit+'">'+data[i].product_name+'</option>';
}
$("select.productname").on("change",function(){
    var weight = $(this).find(":selected").data("product_weight");
    var unit = $(this).find(":selected").data("product_unit");
    var span = "<span>"+weight+unit+"</span>";
    $("#target_div_where_to_display_weight").html(span);
});

如果我添加新产品我的id weight_wrapper将变为weights_wrapper1我想输出就像不知道如何循环这个

$("#target_div_where_to_display_weight '+ i +'  ").html(span);

这是我的追加

$(document).ready(function() {
        $('#add-form').click(function() {
            i++;
            $('#add-me').append(
    +'<div id="weights_wrapper'+ i +'" class="productweight" name="product_weight">'
)};

Answer 1

我根据您在问题中提供的剪辑准备了一个答案，这就像一次更改一样简单，但在查看完整代码后，我看到您正在添加多行产品选择，每个产品都有自己的体重显示div。

有些事情需要改变和解决。您面临的最大问题是您需要隔离用于页面上每个产品行的索引。简单地依赖过度使用的'i'会导致问题，因为'i'最初并未定义为覆盖静态html的元素，并且它在for循环中重用，等等。让人感到困惑！

第一次创建页面（第一行，带有静态html）应该有一个初始索引设置供要使用的id。然后，当您添加更多整行时，它们会从那里继续索引值。

静态第一行：

        <tr>
            <td class="col-md-7">
                ... snip ...
                <select style="width:48%;" id="productname_1" id_index="1" class="productname" name="id_p[]">
                    <option value="0" disabled="true" selected="true"> product</option>
                </select>
            </td>
            <td class="col-md-1">
                <div id="weights_wrapper_1" class="productweight"></div>
            </td>
        </tr>

这将被视为第一行，索引为1.然后当您使用js添加另一整行时，您需要首先初始化：

    var id_i = 1;// 1 meaning one row already exists in the static html

然后按照构建另一行的其他js输出，确保遵循与初始静态行相同的格式（相同的id命名约定）。将“id_i”替换为“1”，以便使用“productname_2”和“weights_wrapper_2”等构建html。

    $('#add-form').click(function() {
        id_i++;// will change to '2' on first click
        $('#add-me').append( ... the html build ... );
    }

如果你在上面的“select”元素中进一步发现，我添加了“id_index ='＃'”，jquery可以使用它来使用正确的索引号引用你中的哪一个“weights_wrapper_＃”想把重量信息放到：

    $("select.productname").on("change",function(){
        ... snip ...
        var id_index = $(this).attr("id_index");
        $("#weights_wrapper_"+ id_index).html(span);
    }

如何使用Jquery append（）显示数据

1 个答案: