如何从选择标记中的值打印项目符号列表

我正在使用innerHTML练习打印到html页面。我试图从选择标记中使用项目符号列表打印ID为printHere的段落中的值。到目前为止，我可以获得价值，但我不知道该从哪里去。如何从选择标记中的值打印项目符号列表

我的HTML

<!DOCTYPE html> 
<html> 
<head><title></title><meta charset="UTF-8"></head> 
<body> 
<h3> Pick your fruit to print it to the menu below</h3> 
<select id="fruitSelect"> 
    <option value = "banana" >banana</option> 
    <option value = "strawberry">strawberry</option> 
    <option value = "apple">apple</option> 
</select> 
<p id="printHere"></p> 
<button type="button" onclick = "print()">Select</button> 
</body> 
</html>

而且我的脚本

<script> 
function print(){ 
    var x = document.getElementById("fruitSelect"); 
    console.log(x.value);//test to see if it works 
    document.getElementById("printHere").innerHTML=x; 
} 
</script>

来源

2017-04-08 MusicGirl

您正在使用innerHtml并传递一个HTML元素“x”。与'innerText'不同，'innerHTML'不会设置字符串，而是将它作为纯文本或转义的HTML传递，但作为实际的HTML被视为HTML。这就是为什么你得到：'[object HTMLSelectElement]'而不是你看到的打印到控制台的值 - 因为在你的console.log（）中调用你传递的'x.value'而不是'x'。

您的'document.getElementById（“fruitSelect”）'返回'[object HTMLSelectElement]'，它是页面DOM中的一个元素，而不仅仅是元素的'值'。该元素具有属性，其中一个属性为'value'，正如console.log（x.value）调用中可以看到的那样。

我的建议是，让您的<p>标签<ul>标签，然后添加<li>标签与内选定元素的“价值”，以建设子弹点列表，你正在寻求做。

在下面的示例中，我已经放置了原来的'打印'功能进行比较，添加了两个变体，并将标记为<p>的标记更改为<ul>标记。运行该示例，检查三个函数之间的差异，并且您应该明白。

<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
</head> 
<body> 
    <h3> Pick your fruit to print it to the menu below</h3> 
    <select id="fruitSelect"> 
     <option value="banana">banana</option> 
     <option value="strawberry">strawberry</option> 
     <option value="apple">apple</option> 
    </select> 
    <ul id="printHere"> 

    </ul> 
    <button type="button" onclick="print()">What you had</button> 
    <button type="button" onclick="setAsList()">Set as selection</button> 
    <button type="button" onclick="addToList()">Add to selection</button> 
    <script> 

     function print() { 
      var x = document.getElementById("fruitSelect"); 
      console.log(x.value);//test to see if it works 
      document.getElementById("printHere").innerHTML = x; 

     } 

     function setAsList(){ 
      var x = document.getElementById("fruitSelect"); 
      console.log(x.value);//test to see if it works 
      document.getElementById("printHere").innerHTML = "<li>" + x.value + "</li>"; 
     } 

     function addToList() { 
      var x = document.getElementById("fruitSelect"); 
      console.log(x.value);//test to see if it works 
      document.getElementById("printHere").innerHTML += "<li>" + x.value + "</li>"; 
     } 

    </script> 

</body> 
</html>

来源

2017-04-08 22:15:27 dylansweb

的“setAsList”功能和“addToList（）”之间的差别是仅在“.innerHTML”，即的设定中使用的操作者，在使用一方面‘=’设置innerHTML，另一方面，'+ ='用于添加到现有的innerHTML中。 – dylansweb

我相信下面的满足您的要求：

<html> 
    <head> 
     <title></title> 
     <meta charset="UTF-8"> 
    </head> 
    <body> 
     <h3> Pick your fruit to print it to the menu below</h3> 
     <select id="fruitSelect"> 
      <option value = "banana" >banana</option> 
      <option value = "strawberry">strawberry</option> 
      <option value = "apple">apple</option> 
     </select> 
     <ul id="printHere"> 
     </ul> 
     <button type="button" onclick = "print()">Select</button> 
    </body> 
</html> 

<script> 
function print() { 
    var x = document.getElementById("fruitSelect"); 
    var node = document.createElement("li"); 
    var textNode = document.createTextNode(x.value); 
    node.appendChild(textNode); 
    document.getElementById("printHere").appendChild(node); 
} 
</script>

这将创建一个新的<li>元素每次 '选择'按钮被单击并将下拉字段的值添加到在将printHere <ul>与此<li>附加之前加上。

来源

2017-04-08 22:12:24 stuartmccoll

它工作得很好。你可以试试这个：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
\t <h3>Pick your fruit to print it to the menu below</h3> 
 
\t <select id="fruitSelect"> 
 
\t \t <option value="banana" >banana</option> 
 
\t \t <option value="strawberry">strawberry</option> 
 
\t \t <option value="apple">apple</option> 
 
\t </select> 
 
\t <p id="printHere"></p> 
 
\t <button type="button" onclick="print()">Select</button> 
 
\t <script> 
 
\t function print(){ 
 
\t  var option = document.getElementById('fruitSelect').querySelectorAll('option'), 
 
\t  \t list = document.createElement("ul"), 
 
\t  \t listItem; 
 
\t \t \t 
 
\t \t for(var i = 0, len = option.length; i < len; i++){ 
 
\t \t \t listItem = document.createElement("li"); 
 
\t \t \t listItem.innerHTML = option[i].innerHTML; 
 
\t \t \t list.appendChild(listItem); 
 
\t \t } 
 
\t  document.getElementById("printHere").innerHTML = list.innerHTML; 
 
\t } 
 
</script> 
 
</body> 
 
</html>

点击你得到所需的输出按钮后。

来源

2017-04-08 22:38:14

如何从选择标记中的值打印项目符号列表

回答

相关问题