Question

如何获取html中datalist的选项的值并显示在网页上

这里是我的脚本
<p id="DLcontents"></p>
<script type="text/javascript">
var x = document.getElementById("myDatalist").options.length;
var obj = document.getElementById("myDatalist");
for (var i = 0; i < x; i++) {
var str = obj.options[i].value;
document.getElementById("DLcontents").innerHTML = str + "<br/>";
</script>
运行的结果是只显示最后一个值！（一共有5个）
初学网页设计，看这代码没问题，但就是不知道哪里的问题。。。

Answer 1

最后输出的错了。
应该是添加。你那么写是每次都改变p里面的内容了。
改成下面+=
document.getElementById("DLcontents").innerHTML += str + "<br/>";

还有for少了半个｝

Answer 2

例如
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

用jquery取值
$('#cars option:nth-child(1)').val()
是取BMW
$('#cars option:nth-child(3)').val()
是取Volvo

Answer 3

最后输出的错了。
应该是添加。你那么写是每次都改变p里面的内容了。
改成下面+=
document.getElementById("DLcontents").innerHTML += str + "<br/>";

还有for少了半个｝

Answer 4

大括号少了。for循环那里大括号只有一个，没有 } 回来，
document.getElementById("DLcontents").innerHTML += str + "<br/>";

要改成+=

完整的就是
<script type="text/javascript">
var x = document.getElementById("myDatalist").options.length;
var obj = document.getElementById("myDatalist");
for (var i = 0; i < x; i++) {
var str = obj.options[i].value;
document.getElementById("DLcontents").innerHTML += str + "<br/>";
}
</script>

追问

大括号是在复制的时候漏掉了，问题出现在后面赋值！

Answer 5

这个控件是在net里面的控件，里面的值可以给它一个ID，通过ID查询读出然后通过表格绑定相应ID显示