Javascript 从循环中的选择框中获取值

Question

我有以下内容:

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>';

与其他一些代码一起产生这个

我想在用户点击提交之前获取每个选择框得分和所选团队的值，以显示在页面底部的 div 中

我已经成功实现了这个结果:

使用下面的代码，但它仅适用于 1 个团队

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;
}

如果有人可以请给我一些建议，我如何修改上面的脚本以使所有选定的团队和分数显示在 div 中

Answer 1

首先，获取您选择的 select 元素:

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

对于所选选项的文本，您需要使用:

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

其值(value):

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

如何实现:

就您而言，假设每个获胜者和得分都有一个唯一的ID:

我们将使用计数器 $i 来实现这一点

请务必将 $max 变量定义为您想要循环的次数

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>'
}

我们的服务器端代码已准备就绪。现在，让我们回到我们的客户端代码。

我们需要一种方法来获取我们之前生成的所有元素。

我们需要一个循环:

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;

}