Question

I have the following selection :

var squad_name= $("#squad option:selected").text();

and the HTML behind looks like this:

<div id="squad">
    <label>Squad Type:</label>
    <select id="choosesquad">
        <option value ="0">Choose squad</option>
    </select>
    <input id="setsquad" type="button" value="Set"/><br>

    <div id="unitdiv">
    <label>Choose Unit:</label>
    <select id="chooseunit" class="unit">
        <option value ="0">Choose unit</option>
    </select><br>
    <label>Number of units:</label>
    <select id="number" class="unit">
        <option value="0">0</option>      
    </select><br>
</div>

for some reason after this selection the squad_name=Choseen Squad Choose unit 0

I just can’t figure out: what I am doing wrong?

Answer 1

This is happening because you’re selecting all <option> tags in #squad, which has 3 <select> tags with 3 :selected <option> tags

$("#squad option:selected") is aggregating each selected option from #choosesquad, #chooseunit, and #number

from the sounds of it you need to use this:

var squad_name = $("#choosesquad option:selected").text();