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

我想要做的是从每个选择框中选取选项，单击“提交”并将它们存储在“存储”段落中。如何获取选定的文本并显示它们？

这里是我的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()

这个工程那种，但只有最后选择框的文本正在显示在“存储”段落中。什么是错误的？

来源

2014-02-15 Duplo W

而你与遇到的问题是......？什么情况不会发生？你会得到什么错误？你用控制台调试过了吗？ – j08691

@ j08691我没有收到任何错误，但存储的数字也没有显示在我的段落中。所以我不知道是什么问题.. –

您需要存储的每个选择的价值，应该显示。像

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

来源

2014-02-15 16:18:32

如果您单击提交多次，您的回答会在彼此之后添加新的存储数字。 –

@ Duplo W，请看看更新的答案。 –

这个伎俩，谢谢。 –

一个直接的问题是，你正在使用选择为阵列，并作为计数变量 - 改变

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

来源

2014-02-15 16:04:20 jing3142

我改变了它，现在它半功能，但只有最后一个选择框的文本正在显示。还在我的答案中的最后一行添加了一个编辑，我忘了在我的内容中添加innerHTML = storedNumbers; –

你会建议我如何解决这个新问题？ –

这是因为storedNumbers可能会随着循环的进行而改变，但当前值总是会覆盖之前的值，因此您只剩下最后一个值 – jing3142

首先，我不建议安装的处理程序为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>

来源

2014-02-15 16:19:57 linstantnoodles

我收到错误：Uncaught TypeError：无法调用方法'addEventListener'null –

您的脚本标记在文档的末尾吗？或者你是否选择'onload'事件之后的元素？如果你对两者的回答都不是，那么这可能是问题所在。 – linstantnoodles

它在小提琴中工作，但不在浏览器中。感觉像有一个）在这里失踪：submitButton.addEventListener（“click”，function（）{？ –

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

回答

相关问题