Javascript 使用ajax选择产品名称后显示数据
我尝试从数据库中使用ajax输出数据我传递数据产品名称和产品重量如何显示产品重量 现在我的输出Javascript 使用ajax选择产品名称后显示数据,javascript,jquery,ajax,Javascript,Jquery,Ajax,我尝试从数据库中使用ajax输出数据我传递数据产品名称和产品重量如何显示产品重量 现在我的输出 <select>category</select> //after select category It will display product name <select>productname</select> //after select productname How can i display my product weight ou
<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
<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 = "<div class='weight' data-ip_p='"+id_p+"'><span>"+weight+"</span>"+added_content+"</div>";
$("#weights_wrapper").append(content);
});</pre>
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(){
}
});
<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>
<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>
您可以将产品重量存储在每个选项标签内的新标签属性中，如数据重量。要显示相应的重量，只需执行以下操作： $("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>'; } 借 在我之前编写的代码中，将第一条指令替换为： var weight = $(this).find(":selected").data("product_weight"); // or .attr("data-product_weight"); 更新2 如果要将所选每个产品的重量附加到div中，则应如下所示： 首先，将您的目标\u div_where_to_display_weight div更改为a，然后更改更改时的第一个函数： 通过这种方式，可以添加锚定标记来管理每个权重块。例如，如果要在添加权重后删除权重，可以设置added_content=；然后创建以下函数：
您可以将产品重量存储在每个选项标记内的新标记属性中，如数据重量。要显示相应的重量，只需执行以下操作： $("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>'; } 借 在我之前编写的代码中，将第一条指令替换为： var weight = $(this).find(":selected").data("product_weight"); // or .attr("data-product_weight"); 更新2 如果要将所选每个产品的重量附加到div中，则应如下所示： 首先，将您的目标\u div_where_to_display_weight div更改为a，然后更改更改时的第一个函数： 通过这种方式，可以添加锚定标记来管理每个权重块。例如，如果要在添加权重后删除权重，可以设置added_content=；然后创建以下函数：
这段代码现在做什么了？这段代码使用findProductName函数从数据库中选择product\u name product\u weight，这样这段代码就不会有bug了？你想给它添加一些功能吗？是的，先生，我添加了我的html@JaromandaX我只想在我的html中显示我的产品重量我一直在函数中获取数据，但我不知道如何显示它刚才我选择了我的类别，它将正确显示产品名称，但在我选择产品名称后，我想显示产品重量我不知道如何显示要做到这一点，这段代码现在做什么？这段代码使用findProductName函数从数据库中选择product\u name product\u weight，这样这段代码就不会有bug了？你想给它添加一些功能吗？是的，先生，我添加了我的html@JaromandaX我只想在我的html中显示我的产品重量我一直在函数中获取数据，但我不知道如何显示它刚才我选择了我的类别，它将正确显示产品名称，但在我选择产品名称后，我想显示产品重量我不知道如何显示为此{product_name:water，id_p:11，product_weight:1}在我的控制台中，我已经将.dataweight更改为.dataproduct_weight谢谢。It's work==i shd lern关于javascript的更多信息感谢lotI使用动态添加我尝试在数组循环中显示，先生，在我的productname类中i store name=id\u p[]在一个arrays@user8663822你到底想做什么？我的意思是如何使用dynamic addd我已经更新了我在代码中使用的代码append我试着把目标定为在哪里显示重量[i]{product_name:water，id_p:11，product_weight:1}在我的控制台中，我已经把.dataweight改为.dataproduct_weight谢谢。It's work==i shd lern关于javascript的更多信息感谢lotI使用动态添加我尝试在数组循环中显示，先生，在我的productname类中i store name=id\u p[]在一个arrays@user8663822你到底想做什么？我的意思是如何使用dynamic addd我已经更新了我的代码我在代码中使用了append我尝试将目标设置为div where to display重量[i]