получить данные-цена выбранного значения в выпадающем списке в массиве

Question

я следующий код

<tbody> 
    <tr> 
     <td style="width:40%"> 
      <select id="pname.0" name="pname[]" class="form-control "> 
      <?php 
      $this->db->order_by('name','asc'); 
      $prod = $this->db->get('product')->result_array(); 
      foreach($prod as $row): ?> 
       <option data-price="<?php echo $row['price'];?>" value="<?php echo $row['prod_id'];?>" > 
        <?php echo ucwords($row['name']);?> 
       </option> 
      <?php endforeach; ?> 
      </select> 
     </td> 
     <td style="width:10%"> 
      <input class="form-control" onchange="javascript:calc();" id="item_quantity.0" name="qnty[]" value=""/> 
     </td> 
     <td class="text-right" style="width:10%"> 
      <input class="form-control text-right" onchange="javascript:calc();" id="item_price.0" name="price[]" value=""/> 
     </td>     
     <td class="text-right" style="width:10%"> 
      <input class="form-control text-right" id="subtot.0" readonly name="item_sub_total" value=""/> 
     </td> 
    </tr> 
</tbody> 

Теперь я хочу, чтобы получить значение data-price атрибута выбранной опции изменения в раскрывающийся в текстовое поле, имеющий динамический идентификатор item_price_ 0. Это изменяется, поскольку я добавил кнопку добавления строки. Когда я нажимаю кнопку Добавить строку, идентификатор будет item_price_ 1.

Пожалуйста, помогите мне, как я могу получить эти значения с помощью JQuery или JavaScript

Answer 1

Это вы, что искали?

//if your table has an id or class, use it as tag selector is not good without context. 
//$(".tableClass") OR $("#tableID")  
$("table").on('change', "select[id^='pname']", function() { 

    var $row = $(this).closest("tr"); 
    $row.find("input[id^='item_price']").val($(this).find('option:selected').data("price")); 

}); 

Таким образом, чтобы использовать . в селекторов, вам нужно, чтобы избежать их, как указано (2 пункта) в jQuery selectors API

Demo @fiddle

Answer 2

Сначала назначьте класс для всех select. (в дополнение к «управлению формой»). Я полагаю, есть выбирает test класс

var selectedPrices = []; 
    var i = 0; 
    $(".test").each(function(){ 
     selectedPrices[i] = $(this).find(":selected").attr("data-price"); 
    i++; 
    }); 

Теперь selectedPrices массив цен. Вы можете делать все, что хотите.

Answer 3

Вы можете прослушать изменения на вашем элементе, и получить атрибут цены, как так:

$('#pname.0').on('change', function(){ 
    var price = $(this).find('option:selected').data('price'); 
}); 

PS: Я не уверен, что вы можете использовать «» в атрибуте ID.