使用JavaScript访问div内部的嵌套值

时间:2014-09-04 13:07:30

标签: javascript google-analytics google-tag-manager

我遇到运行基本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,可以计算出某人在三个不同选项中选择的内容并返回其值。

1 个答案:

答案 0 :(得分:1)

好的,首先让我们改进您的代码:

  1. 永远不要在ID中使用空格(id =&#34; NoSpacesAllowed&#34;)
  2. 类名中的空格用于定义多个类(class =&#34; class1 class2 class3&#34;)
    3.您应该始终在选项标记中提供值属性。
    <option value="xy">This is some random text</option>
    但是,这些值可以由任何用户更改,因此您可以阅读修改后的值 (像我这样的人经常修改这样的cliend代码,看看它是否破坏了任何功能) 永远不要将这些值直接存储到数据库中! 检查内容(或值)是否有效,否则可能会出现偏差问题。我的意思是biiiiiiiig问题
  3. 一般方法:

    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;