jQuery Selector：當我有多個選擇菜單時，如何指定一個選擇菜單？

Question

我有4個選擇菜單，全部使用相同的產品。 （用戶應該使用選擇菜單將產品添加到發票中）。

因此，每個部分由選擇菜單，數量文本字段和價格文本字段組成。但我有四個人在同一頁面。

每當我從選擇菜單中選擇產品時，我想更改數量和價格。但更具體一點，我只想知道，如何找出哪個選擇菜單被點擊。

如果選擇菜單有一類產品（.product），當我選擇產品時，所有部分都會受到影響。但我只想影響特定的選擇菜單部分。

$(".product").change(function(event){ 
    alert('product picked'); // testing 
}); 

我不能只追加一個數字，像這樣：product1，product2，product3。因爲那時在javascript文件我會寫4個不同的功能

$(".product1").change(function(event){, 
$(".product2").change(function(event){, etc. 

我知道這是很基本的，但我需要刷新我的jQuery的東西。

這是一些HTML格式。我僅包含產品選擇菜單和數量文本字段以簡化操作。

<div class="item"> 
<p> 
    Product: 
    <select class="product" id="invoice_line_items_attributes_0_item_id" name="invoice[line_items_attributes][0][item_id]"><option value="1" data-defaultquantity="1">WP setup</option> 
    <option value="2" data-defaultquantity="1">WordPress Theme Design</option> 
    <option value="3" data-defaultquantity="1">WHE/yr</option> 
    <option value="4" data-defaultquantity="1">WHE/mo</option></select> 
</p> 

Qty: <input class="quantity" id="invoice_line_items_attributes_0_quantity" name="invoice[line_items_attributes][0][quantity]" size="30" type="text" value="1"><br> 
</div><hr> 

<div class="item"> 
<p> 
    Product: 
    <select class="product" id="invoice_line_items_attributes_1_item_id" name="invoice[line_items_attributes][1][item_id]"><option value="1" data-defaultquantity="1">WP setup</option> 
    <option value="2" data-defaultquantity="1">WordPress Theme Design</option> 
    <option value="3" data-defaultquantity="1">WHE/yr</option> 
    <option value="4" data-defaultquantity="1">WHE/mo</option></select> 
</p> 
Qty: <input class="quantity" id="invoice_line_items_attributes_1_quantity" name="invoice[line_items_attributes][1][quantity]" size="30" type="text" value="1"><br> 
</div><hr> 

Answer 1

$(".product").change(function(event){ 
    $(this).closest(".section").find(".quantity").val("somevalue"); 
    $(this).closest(".section").find(".price").val("somevalue"); 
}); 

Answer 2

在事件處理程序，this必將給相關<select>元素。

$(".product").change(function(event){ 
    alert($(this).attr('name')); // name of <select> element changed 
}); 

一個方便的技巧是使用「數據」屬性涉及類似的東西<select>到其他領域。也就是說，你可以這樣做存儲相關領域的「ID」的數據屬性，這樣的處理可以找到現場亂用：

<select name='whatever' data-quantity-id="whatever" data-price-id="whatever"> 
    <option ... > 
</select> 

然後在處理程序：

$('.product').change(function(event) { 
    var $quantity = $('#' + $(this).data('quantityId')); 
    var $price = $('#' + $(this).data('priceId')); 

    // ... 
});