Javascript Get value from select boxes in loop

Question

I have the following:

while($round < $counter)
<select name="picks[]" id="winner">';
        echo'<option value="'.$row['team1'].'">'.$team1.'</option>';
        echo'<option value="'.$row['team2'].'">'.$team2.'</option>';
echo'</select>';            

echo'BY';

echo'<select name="score[]" id="score>';
        echo'<option value="1">1</option>';
        echo'<option value="2">2</option>';
        echo'<option value="3">3</option>';
        echo'<option value="4">4</option>';
        echo'<option value="5">5</option>';
        echo'<option value="6">6</option>';
        echo'<option value="7">7</option>';
        echo'<option value="8">8</option>';
        echo'<option value="9">9</option>';
        echo'<option value="10">10</option>';

Which along with some other code produces this

I would like to get the value of each select box score and selected team to display in a div at the bottom of the page before user clicks submit

I have managed to achieve this result:

using the code below but it only works with 1 team

function disp(){
var winner = document.getElementById("winner").value;
var score = document.getElementById("score").value;

document.getElementById("pickedDiv").style.cssText='background:#f0f0f0;width:60%; height:200px; border:thin solid black; border-raduis:10px;';
document.getElementById("picked").innerHTML="You are selecting: "+winner+" to win by "+score;
}

If someone could please give me some advise how I can modify the script above to get all selected teams and points to disp in div

Answer 1

First, get a select element of your choice:

var element = document.getElementById("winner");

For the text of the selected option, you need to use:

var option_text = element.options[element.selectedIndex].text;

And for its value:

var option_value = element.options[element.selectedIndex].value;

HOW TO IMPLEMENT:

In your case, assuming each winner and score have a unique id:

We will use the counter $i to achieve this

Be sure to define the $max variable to the number of times you want to loop

for ($i = 0; $i < $max; $i++)
{
    // here we concatenate the counter to the id of the select element
    // the first winner in the loop will have id winner0, the second winner1,
    // and so on
    echo '<select name="picks[]" id="winner' . $i . '">';
        echo '<option value="'.$row['team1'].'">'.$team1.'</option>';
        echo '<option value="'.$row['team2'].'">'.$team2.'</option>';
    echo '</select>';

    echo 'BY';

    // here we concatenate the counter to the id of the select element
    // the first score in the loop will have id score0, the second score1,
    // and so on
    echo '<select name="score[]" id="score' . $i . '">';
        echo '<option value="1">1</option>';
        echo '<option value="2">2</option>';
        echo '<option value="3">3</option>';
        echo '<option value="4">4</option>';
        echo '<option value="5">5</option>';
        echo '<option value="6">6</option>';
        echo '<option value="7">7</option>';
        echo '<option value="8">8</option>';
        echo '<option value="9">9</option>';
        echo '<option value="10">10</option>';
    echo '</select>'
}

Our server-side code is ready. Now, lets get back to our client-side code.

We need a way to get all the elements that we generated previously.

We are going to need a loop:

for (var i = 0;;i++)
{
    // note that our for doesn't have an exit condition.
    // it will loop forever. we need a way to find out
    // which is the last element, and break the loop
    var winner = document.getElementById("winner" + i);
    var score = document.getElementById("score" + i);

    // if the element is not found, break the loop
    if (winner == null || score == null)
    {
        break;
    }
    // get the text of the selected option
    var winner_text = winner.options[winner.selectedIndex].text;

    // get the value of the selected option
    var winner_value = winner.options[winner.selectedIndex].value;

    // here, you are ready to do whatever you please with the variables
    // winner_text and winner_value

    // now, lets get the score text and value
    var score_text = score.options[score.selectedIndex].text;
    var score_value = score.options[score.selectedIndex].value;

}