Geek Answers Handbook

JQuery Selector: how can I specify one select menu when I have several?

I have 4 selection menus, all with the same products. (The user must use the selection menu to add products to the invoice).

Thus, each section consists of a selection menu, a text field with a quantity, and price text fields. But I have FOUR those on the same page.

Whenever I select a product from the selection menu, I want to change the quantity and price. But more specifically, I would just like to know how to find out which WHICH menu has selected.

if there is a product class (.product) in the selection menu, when I select a product, ALL sections are affected. But I just want to influence this particular section of the selection menu.

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

I can’t just add a number, for example: product1, product2, product3. Since then in the javascript file I would have to write 4 different functions

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

I know this is very simple, but I need to update jQuery stuff.

This is part of the HTML form. I simply included a product selection menu and a quantity text box for simplification.

 <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>
+4
source share
2 answers
 $(".product").change(function(event){ $(this).closest(".section").find(".quantity").val("somevalue"); $(this).closest(".section").find(".price").val("somevalue"); });
+1
source

In the event handler, this will be bound to the corresponding <select> element.

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

A useful trick is to use the data attributes to associate something like this <select> with other fields. That is, you can do something like storing the "id" of the associated field in the data attribute so that the handler can find the field in a mess:

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

Then in the handler:

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

More articles:


All Articles