Question

我要做的是从每个选择框中抓取所选选项，点击“提交”并将其存储在“已存储”段落中。

这是我的HTML：

<body>

<div id="container">
<button id="button" onclick="rolldices()">Roll dices</button>

<span id="dice1">0</span>
<span id="dice2">0</span>
<span id="dice3">0</span>
<span id="dice4">0</span>
<span id="dice5">0</span>
<span id="dice6">0</span>

<br><br><br><br>

<select id="select1">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
</select>

<select id="select2">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
</select>   

<select id="select3">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
</select>

<select id="select4">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
</select>   

<select id="select5">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
</select>   

<select id="select6">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>

<button id="submit" onclick="submit()">Submit your answer</button>  

<br><br>

<p id="correct">Correct numbers guessed: </p>
<p id="stored"></p>
</div>
</body>
</html>

使用Javascript：

var numbers = [ '1', '2', '3', '4', '5', '6' ];

var dices = [ 'dice1', 'dice2', 'dice3', 'dice4', 'dice5', 'dice6' ];

var select = [ 'select1', 'select2', 'select3', 'select4', 'select5', 'select6']

function rolldices() {

for (var diceindex=0; diceindex<dices.length; diceindex++) {

var dice_value = Math.floor((Math.random()*numbers.length));

document.getElementById("dice" + (diceindex + 1)).innerHTML=numbers[dice_value];

}

} // end of rolldices()

以下是我尝试解决问题的方法：

function submit() {

for (var selectindex=0; selectindex<select.length; selectindex++) {

var e = document.getElementById("select" + (selectindex + 1));
var storedNumbers = e.options[e.selectedIndex].text;

document.getElementById("select" + (selectindex + 1)).text;
document.getElementById("stored").innerHTML=storedNumbers;
}





} // end of submit()

这适用于SORT OF，但只有最后一个选择框的文本显示在“已存储”的段落中。有什么问题？

Answer 1

一个直接的问题是你使用select作为数组和变量来计算 - 更改为

function submit() {

for (var i=0; i<select.length; i++) {

var e = document.getElementById("select" + (i + 1));
var storedNumbers = e.options[e.selectedIndex].text;

document.getElementById("select" + (i + 1)).text;
document.getElementById("stored").innerHTML=storedNumbers;
}

Answer 2

您需要存储每个选定的值并显示它。像

 var res = ""; //declare outside of function for store all value
 function submit() {
    //getting all select tags. 
    var allSelect = document.getElementsByTagName('select');
    for (var select=0; select < allSelect.length; select++) {
         var e = document.getElementById("select" + (select + 1));
         var storedNumbers = e.options[e.selectedIndex].innerHTML;
         res +=storedNumbers; //storing the selected values
    }
    document.getElementById("stored").innerHTML= res;
    res = "";
}

DEMO

Answer 3

首先，我不建议将处理程序作为HTML属性附加。您应该将逻辑和表示分开。此外，我不会为每个字段调用getElementById（效率低下），而是抓住选择字段并根据您需要的字段过滤它们。以下是我将如何处理它：

var selectIds = ['select1', 'select2', 'select3', 'select4', 'select5', 'select6'];
var selectFields = document.getElementsByTagName('select');
var stored = document.getElementById("stored");
var submitButton = document.getElementById("submit");

submitButton.addEventListener("click", function () {
    var values = "";
    for (var i = 0; i < selectFields.length; i++) {
        var select = selectFields[i];
        // One of our target fields
        if (selectIds.indexOf(select.getAttribute("id")) >= 0) {
            values += select.value;
        }
    }

    stored.innerHTML = values;
});

查看我的fiddle。

更新

在尝试获取对元素的引用之前，元素需要存在。一种方法是将脚本粘贴在body标记的最底部。

例如：

<html>
  <body>
    ...
    ...
    ...
    <script type="text/javascript">
      // js here
    </script>
  </body>
</html>

如何获取所选文本并显示它们？

3 个答案: