使用JavaScript访问div内的嵌套值

Question

我在运行一些基本的JavaScript时遇到问题。 我刚开始使用JavaScript，所以还没有完全掌握它。 我要实现的是在表单/表的div中返回选项选择器的值。

我正在利用Google跟踪代码管理器将数据发送到Google Analytics（分析），并尝试使用内置的自动事件侦听器以及自定义JavaScript宏。

基本上，有三个不同的选择器，它们都有不同的值。 这些都在表格中，在<select>中带有选择项。

如何使用JavaScript从三个不同的选择器中获取选择的值？

我正在努力解决的问题是，选择器本身没有ID可以将它们分开，但是父元素atleast具有唯一的div ID。

我将尝试对其外观进行可视化处理：

<form>
  <div id="selection1">
   <table ... >
    <select>
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
   </select>
  </table>
 </div>

  <div id="selection2">
   <table ... >
    <select>
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
   </select>
  </table>
 </div>

  <div id="selection3">
   <table ... >
    <select>
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
   </select>
  </table>
 </div>
</form>

我如何能够从不同的选项中检索和选择的值？ 我已经尝试过了，它的工作原理是：

function () {
var option = document.GetElementsByTagName("select")[0].value; 
return option;
}

但是然后我需要为您可以从中选择的三个不同选择中的每一个进行设置。 我只是不够聪明，无法弄清楚如何编写JavaScript来计算某人在三个不同选项中选择的内容并返回其值。

Answer 1

好吧，首先让我们改进您的代码：

1. 永远不要在id中使用空格（id =“ NoSpacesAllowed”）
   
2. 类名中的空格用于定义多个类（class =“ class1 class2 class3”）
   3.您应该始终在选项标签内提供value属性。
   <option value="xy">This is some random text</option>
   不过，这些值可以由任何用户更改，因此您可以阅读修改后的值
   （像我这样的人经常修改这样的客户代码，以查看其是否破坏了任何功能）永远不要将这样的值直接存储到数据库中！ 检查内容（或值）是否有效，否则可能会出现问题。 我的意思是问题 ！

一般的做法：

var selects = document.getElementById("myselect");
var selectedValue = selects.options[selects.selectedIndex].value;// will gives u "xy"
var selectedText = selects.options[selects.selectedIndex].text;// gives u "This is some random text" but you should not use this<br><br>

您可能要使用类似的方法：

    var selects = document.querySelector("#selection1 select"); //This will return the first <select> inside the specified id. You may need to adjust that selector...

var selectedText = selects.options[selects.selectedIndex].text;