Reputation: 1605
I have this drop down code:
$('#addDropdown').click(function() {
var $d = $('<select class="dropdown"><option selected="selected" value="null" rel="null">Choose your data!</option><option value="1" rel="2">Option 1</option><option value="1" rel="2">Option 2</option><option value="14" rel="15">Option 3</option></select><input type="number" min="1" max="99" class="multiplier" name="multiplier" value="1" size="3"/><br/>').fadeIn().delay(1000);
$('#dropdownContainer').append($d);
});
and I'm passing the values to an ajax function with this code, i use a button to append more drop downs with the same values:
var dropdowns = $(".dropdown"),
one = [],
two = [],
mult = [];
for(var i = 0; i < dropdowns.length; i++) {
one.push(dropdowns.eq(i).find('option:selected').attr('rel'));
two.push(dropdowns.eq(i).val());
mult.push(dropdowns.eq(i).val() * dropdowns.eq(i).find('input[name=multiplier]').val())
}
for the multi option I want to take the value attribute that is selected and multiply it with the value from the number input... my selector isn't working for the input, how can I select that multiplier input??
Upvotes: 0
Views: 536
Reputation: 18233
.find()
only finds elements which are descendants of the currently matched set; since you want adjacent elements (siblings), use .next()
(probably best in this case) or .siblings()
:
for(var i = 0; i < dropdowns.length; i++) {
one.push(dropdowns.eq(i).find('option:selected').attr('rel'));
two.push(dropdowns.eq(i).val());
mult.push(dropdowns.eq(i).val() * dropdowns.eq(i).next('input[name=multiplier]').val())
}
Upvotes: 1