Question

I have a form that has multiple select drop downs. i.e.

Item 1: 
<select name="premier1">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>
<br />
Item 2:
<select name="premier2">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>
<br />
Item 3: 
<select name="premier3">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

Basically What I would like to do would be to use jQuery to add the values of all the premiere drop downs together and provide the total to another <div> tag somewhere on the page.

Answer 1

If you mean the selected values, you could use the the attribute-starts-with-selector^[docs] to get <select> elements that start with “premier”:

var total = 0;

$('select[name^="premier"]').val(function(i,val){total += +val; return val;});

alert( total );

…then pass a function directly to the val()^[docs] method, which gives you the current value of each selected option in the val parameter.

Inside the function, it uses the unary + operator to convert it from a string to a number, and adds it to your total.

---

EDIT: It appears as though returning undefined clears the value. This seems inconsistent with other parts of the API where I’m pretty sure returning undefined has no effect.

I fixed it by doing return val;.

Example: http://jsfiddle.net/ssyyX/