Question

我目前正在开发一个javascript项目，需要我动态生成三个下拉菜单。我目前一切正常，但他们是我不知道如何实施的最后一个功能。

如何打印用户从选择菜单中选择的选项？例如，如果用户选择食物，水果和西瓜，我会打印出来＃34;你选择食物，这是一种水果，你喜欢西瓜。＆＃34;沿着那条线的东西。如果动态生成其他两个选择菜单，我将如何打印用户所做的选择？

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

Answer 1

你可以从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

Answer 2

也许你可以从菜单中获取值并将它们推入一个然后返回的数组中？有助于了解您目前的情况。

Answer 3

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

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

Answer 4

所以基本上你需要获取你的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选择器，但这在性能方面可能更昂贵。

DOM XPath Evaluation

Javascript-从选择菜单中打印出选项

4 个答案: