Javascript-选择菜单中的打印选项

我目前正在从事一个javascript项目，该项目要求我动态生成三个下拉菜单。目前，我的所有功能都正常工作，但它们是我不知道如何实现的最后一个功能

如何打印用户从“选择”菜单中选择的选项？例如，如果用户选择了食物、水果和西瓜，我会打印出您选择的食物，这是一种水果，您喜欢西瓜。沿着这些路线的东西。如果其他两个选择菜单是动态生成的，我将如何打印用户所做的选择

---

编辑：我不能在此项目中使用jquery或innerHTML。

也许您可以从菜单中获取值，并将它们放入一个数组中，然后返回？将有助于查看您当前拥有的内容。

使用jquery，您可以像这样遍历DOM结构：

var p1 = $(this).parent(); // first parent
var text1 = p1.text();
var p2 = p1.parent();      // second parent
var text2 = p2.text();

---

因此，基本上您需要获取DOM元素，然后获取每个元素的选定值，然后构建字符串：

function printStuff() {
  var company = document.getElementById("myCompanies").value;
  var team = document.getElementById("myTeams").value;
  var hero = document.getElementById("myHeroes").value;
  
  var str = "You chose " + company + " which is a company, ";
  str += "which owns " + team + " and has the hero" + hero;
  
  //Use the method shown in the above answer
  //Fetch an existing element
  var hook = document.getElementById("myHookElement");
  
  //Create a text node
  var text = document.createTextNode(str);
  
  //Append the text node to the existing element
  hook.appendChild(text);
}

一旦选择了最终的下拉值，就可以调用该函数。 如果您事先不知道DOM元素的名称，我们可以遍历DOM树或使用某种类型的xpath选择器，但这在性能方面可能更昂贵

---

您可以从JS获取值。然后创建一个标签节点，将文本添加到其中，并将标签附加到某个页面元素

var comicCompanySelect = document.getElementById("myCompanies");
var comicValue=comicCompanySelect.options[comicCompanySelect.selectedIndex].value;

var comicTeamSelect=document.getElementById("myTeams");
var teamValue=comicTeamSelect.options[comicTeamSelect.selectedIndex].value;

var myHeroesSelect=document.getElementById("myHeroes");
var heroesValue=myHeroesSelect.options[myHeroesSelect.selectedIndex].value;

 var label=document.createElement("label");
 var outputText=document.createTextNode("You choose "+comicValue+", which is a"+teamValue+", and you like"+heroesValue);
 label.appendChild(outputText);

 element.appendChild(label); //append it to desired element on page

---

如果您想显示文本而不是值，请使用.text而不是.value

这里有一个jfiddle供任何想要帮助的人使用：我不能使用jquery或innerHTML。在javascript中没有办法做到这一点吗？innerHTML是普通的javascript，您刚才说您不能使用它，我想我的意思是我不能使用.innerHTML方法如何打印但那会出现在表格上吗？这怎么可能？您是这样获取元素的，而不是它们的值。更新代码以获取值-谢谢Matúš！嘿，丹尼尔，你说在表格上打印是什么意思？只需在网页上打印或打印到表单上的特定文本框？与通过createTextNode在另一个答案中显示的方法相同，但这对于值选择更简单。在这种情况下，表单所包含的div的元素名称是什么？它不是名称，它的元素类似于div itslef。如果要将其放入div中，请使用document.getElementsByNamedivName[0]。appendChildlabel或document.getElementById'divId'。appendChildlabel如果需要将其添加到元素中，而不是最后，则可以使用“确定”，明白了。但为什么最后两个选项会附加值？是因为它是值的名称吗？我只想检索选项中的全文。对于全文选项，您应该使用comicTeamSelect.options[comicTeamSelect.selectedIndex].text中的.text；