Question

please run this jsfiddle as an example.

http://jsfiddle.net/AFzqt/11/

in my example, i have a link saying same as above, if you fill out the first box it will copy the value in the second box. look at the code, and look at the display. theres a reiteration of the code just to have the boxes appear twice. well… in my real use of this, i ideally want there to be about 40 of these buttons.

is there a way to do this without copying the code 40 times?
i am new to jquery, usually in another language i would just pass in arguments, but with this syntax I don’t see how i can do that? how can i handle this?

feel free to dabble around on my jsfiddle, and hopefully link a new revision, with the goal of reducing the handling of those 2 ‘same as above’ buttons into just one function with the entry id’s as parameters

Answer 1

If you add the changeButton class to each of the buttons it will be easier to select each of them to bind the event handler:

<a href="#" class="changeButton">Same as Above</a>

Then we can select each of the elements like so:

$(".changeButton").on("click", function(e) {

    //select the previous jQuery Mobile select widgets, we will use just the previous two
    var $allPrev = $(this).prevAll('.ui-select').find('select');

    //change the value of the immediate previous select widget to the value of the one preceding it
    $($allPrev[0]).val($($allPrev[1]).val()).selectmenu("refresh");

    e.preventDefault();
});

Here is a demo: http://jsfiddle.net/AFzqt/12/

This code will work for umpteen buttons since it works by using intuitive knowledge of the HTML structure (each link uses the previous two select widgets, no matter where on the page the link resides).