Question

I have this code:

<div id="wrapf">

<div class="dropsf">
  <select name="f" class="food">
    <option value="" rel="">Choose!</option>
    <option value="1" rel="2">1</option>
    <option value="3" rel="6">2</option>
    <option value="7" rel="14">3</option>
  </select>
</div>

<div class="serve">
 <button id="plus">+</button>
 <input id="srv" name="srv" class="srv" type="text" value="1" size="2" readonly="readonly"/>
 <button id="minus">-</button>
</div>

</div><!-- #wrapf -->

I had this code before I added a few <div> to the above code (for alignment and CSS reasons):

var food = $(".food"),
    cc = [],
    gc = [];

    //Push values into an array.
for(var i = 0; i < food.length; i++) {
  var v = food.eq(i).find('option:selected').val();
  var m = food.eq(i).siblings('input[name=srv]').val();
    gc.push(food.eq(i).find('option:selected').attr('rel'));
    cc.push(v * m); 
 }

But now my javascript isn’t working, and I’m confused over how to get the values from the drop down… (I append each drop down, that’s why I’m using the for statement), my v variable is fine and the gc.push statement is working, but my m variable isn’t registering. I’m trying to get the value from the serving input, how can I do this?

ps. I’ve also tried .find()

Answer 1

input[name=srv] is not a sibling of .food. Also, for looping over jQuery objects, I suggest using .each.

var food = $(".food"),
    cc = [],
    gc = [];

food.each(function(){
    var $this = $(this),
        // you can just get the val of the select
        val = $this.val(),
        // this is the same as $(this).find('option:selected')
        option = $('option:selected', this),
        // or even simpler: $('#srv').val();
        inputVal = $this.parent('.dropsf').siblings('.serve').find('input[name=srv]').val();
    gc.push(option.attr('rel'));
    cc.push(val * inputVal);
});