Using Jquery, What Is The Best Way To Get The "next" Textbox With A Specific Class Name

i have a bunch of repeating textboxes and comboboxes on an html page. I want to change the value of the textbox below the combobox when i change the combobox. So i have this code

Solution 1:

You could use .next() to return the next item or pass it a selector if you are more picky.

$(this).next('.quantity').val(10);

No need for extra DOM Traversing like parent() or such.

Working JSFiddle: http://jsfiddle.net/CXzVe/2/.

Solution 2:

You can try next():

$('.myDropdown').change(function () {
    var currentDropdownValue = $(this).val(); 
    if (currentDropdownValue == "Regular") {
         //CHANGE TEXTBOX BELOW THIS COMBOBOX WITH CLASS = "QUANTITY" TO 10.
        $(this).next('.quantity').val('10');
    }
});

You may need to jump around your HTML structure a bit if your input field isn't a sibling of your drop-down, such as $(this).parent().next('.quantity').val('10').

Edit: here's a jsFiddle for you.

Solution 3:

If you happen to be updating your DOM after the initial load of the page, you'll need to use $.live() or $.delegate() because jQuery is not aware of the change.

JavaScript

$(".manufacturer").live("change", function () {
    var currentValue = $(this).val(); 
    if (currentValue && currentValue === "Regular") {
         $(".quantity").val("10");
    }
});

HTML

<selectclass="manufacturer"><optionvalue="volvo">Volvo</option><optionvalue="saab">Saab</option><optionvalue="mercedes">Mercedes</option><optionvalue="audi">Audi</option></select><inputclass="quantity"type="text" />