สอบถามเกี่ยวกับการเขียน select dropdows ดึงข้อมูลสินค้า กดเลือกสินค้าแล้วแสดงราคาสินค้าตามมาครับ (ผมใช้ตัวjavascriptในส่วนที่ต้องการดึก)

<table class="table table-bordered table-hover" id="tab_logic">
<thead>
    
<tr class="w3-table-all" style="background-color:#CCFFFF;color:black">
<th class="text-center"> # </th>
<th class="text-center"> Product </th>
<th class="text-center"> Qty </th>
<th class="text-center"> Price </th>
<th class="text-center"> Total </th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1</td>
<td><select class="form-control" name='product[]' onChange="option_checker(this);"></select></td>
<td><input type="number" name='qty[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0"/></td>
<td><input type="number" name='price[]' placeholder='Enter Unit Price' class="form-control price" step="0.00" min="0"/></td>
<td><input type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>

<div class="row clearfix">
<div class="col-md-12">
<button id="add_row" class="btn btn-default pull-left">Add Row</button>
<button id='delete_row' class="pull-right btn btn-default">Delete Row</button>
</div>
</div>
<div class="row clearfix" style="margin-top:20px">
<div class="pull-right col-md-4">
<table class="table table-bordered table-hover" id="tab_logic_total">
<tbody>
<tr class="w3-table-all" style="background-color:#CCFFFF;color:black">
<th class="text-center">Sub Total</th>
<td class="text-center"><input type="number" name='sub_total' placeholder='0.00' class="form-control" id="sub_total" readonly/></td>
</tr>
<tr>
<th class="text-center">Tax</th>
<td class="text-center"><div class="input-group mb-2 mb-sm-0">
<input type="number" class="form-control" id="tax" placeholder="0">
<div class="input-group-addon">%</div>
</div></td>
</tr>
<tr>
<th class="text-center">Tax Amount</th>
<td class="text-center"><input type="number" name='tax_amount' id="tax_amount" placeholder='0.00' class="form-control" readonly/></td>
</tr>
<tr>
<th class="text-center">Grand Total</th>
<td class="text-center"><input type="number" name='total_amount' id="total_amount" placeholder='0.00' class="form-control" readonly/></td>
</tr>

<script type="text/javascript">
$(document).ready(function(){

option_list('addr0');

var i=1;
$("#add_row").click(function(){b=i-1;
$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
option_list('addr'+i);
i++; 
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
calc();
});

$(".product").on('change',function(){
option_checker(this)
});


$('#tab_logic tbody').on('keyup change',function(){
calc();
});
$('#tax').on('keyup change',function(){
calc_total();
});

});

function option_checker(id)
{
var myOption=$(id).val();
var s =0;
$('#tab_logic tbody tr select').each(function(index, element){
var myselect = $(this).val();
if(myselect==myOption){
s += 1;
}
});
if(s>1){
alert(myOption+' as been added already try new..')  
}
}

function option_list(id)
{
el='#'+id;
     
var myArray =['<?"SELECT * FROM product ORDER BY pd_id ASC";$objQuery = mysql_query($strSQL);
while($objResuut = mysql_fetch_array($objQuery))?>'];
var collect = '<option value="<?php echo $objResuut["pd_id"];?>"><?php echo $objResuut["pd_id"]." - ".$objResuut["pd_name"];?></option>';

for(var i = 0; i<myArray.length;i++){
collect += '<option value="'+myArray[i]+'">'+myArray[i]+'</option>';
}
$(el+" select").html(collect);
}

function calc()
{
$('#tab_logic tbody tr').each(function(i, element) {
  
var html = $(this).html();

var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
$(this).find('.total').val(qty*price);

calc_total();
});
}

function calc_total()
{
total=0;
$('.total').each(function() {
total += parseInt($(this).val());
});
$('#sub_total').val(total.toFixed(2));
tax_sum=total/100*$('#tax').val();
$('#tax_amount').val(tax_sum.toFixed(2));
$('#total_amount').val((tax_sum+total).toFixed(2));
}
</script>