CODEWITHSUNDEEP
jqueryselectorthis
Chaya Cooper
Chaya Cooper

Reputation: 2530

Modify this change function to use (this) and the next element with same name as the id of (this)

This Dropkick change function updates the value of another <select> element when an option is selected. I'm using the function on 300+ pairs of <select> elements so I'd love to modify the function so as not to require specifying the selectors for each element.

Since the elements aren't positioned next to each other, I'd like to incorporate this method for getting the next element with same name as the id of the selected input stackoverflow.com/a/7734190/1056713

EDIT - In order to simplify the example for this posting I've used a generic name and id for these elements, but the name of the 2nd element would match the id of the 1rst element.

A working example of the function is posted here: http://jsfiddle.net/chayacooper/yhAX5/6/

JS

$('#Select1').dropkick({
    change: function(value) {
        var $select2 = $('#Select2');
        removeDefaultFromSelect($select2);
        $select2.val(value);
    }
});

HTML

<!-- Dropkick styled select element -->
<select name="DropkickSelect" id="Select1" class="dropkick">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select> 

<!-- Element who's value will be set  -->
<select name="Select1" id="Select2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Upvotes: 0

Views: 133

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074495

Update below (question was updated)

Original answer:

Oddly, this in the change callback isn't the select element, it's an array in which the select element seems to be the first entry. That's quite odd.

But using that information, you can get the id from this[0] and get the number from the id by removing all non-digits and parsing it, like this:

var idnum = parseInt(this[0].id.replace(/\D/g, ''), 10);

Then, of course, just add one to it to get the next select, so:

$('selector for the dropkick things to hook up').dropkick({
    change: function(value) {
        var idnum = parseInt(this[0].id.replace(/\D/g, ''), 10) + 1;
        var $nextSelect = $('#Select' + idnum);
        removeDefaultFromSelect($nextSelect);
        $nextSelect.val(value);
    }
});

Updated Fiddle

Alternately, you could use a data-* attribute on each select to indicate what the other select it should use is, but if you're always numbering them in ascending order, that's probably more trouble than it's worth.

Update: Re your edit:

...but the name of the 2nd element would match the id of the 1rst element

That makes it even easier, you can just use an attribute selector:

$('selector for the dropkick things to hook up').dropkick({
    change: function(value) {
        var $nextSelect = $('select[name="' + this[0].id + '"]');
        removeDefaultFromSelect($nextSelect);
        $nextSelect.val(value);
    }
});

Updated Fiddle

Upvotes: 1

Related Questions