javascript - 使用 JavaScript 访问 div 内的嵌套值

Question

我在运行一些基本 JavaScript 时遇到问题。我最近才开始接触 JavaScript，所以还没有完全掌握它。我想要实现的是返回表单/表格的 div 内选项选择器的值。

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

基本上，存在三种不同的选择器，它们都有不同的值。这些都在表格内，并且在 <select> 中进行了选择。 .

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

我遇到的问题是选择器本身没有 ID 来分隔它们，但父元素至少有一个唯一的 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.您应该始终在选项标记内提供值属性。
   <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;