Question

我试图根据DOM元素的listindex启动事件处理。我无法理解为什么代码不起作用，因为我在boostrap环境中运行它。使用Javascript：

 <select name="aloga" data-placeholder="Select your aloga" id="aloga"      class="form-control input-lg select2">
 <option value="1" data-code="A" selected > Peter </option>
 <option value="2" data-code="B"> Paul </option>
 <option value="3" data-code="C"> Penn </option>
 </select>

然后是以下HTML代码：

import json
import operator

data = [{"timestamp": 1495126917.0, "client_ip": "10.200.3.55", "remote_host": "175.106.59.78"}, {"timestamp": 1495126915.0, "client_ip": "10.200.3.55", "remote_host": "175.106.59.78"}, {"timestamp": 1495126917.0, "client_ip": "10.200.3.55", "remote_host": "201.83.41.11"}, {"timestamp": 1495126913.0, "client_ip": "10.200.3.55", "remote_host": "78.47.139.58"}, {"timestamp": 1495126915.0, "client_ip": "10.200.3.55", "remote_host": "175.106.59.78"}, {"timestamp": 1495126917.0, "client_ip": "10.200.3.55", "remote_host": "201.83.41.11"}, {"timestamp": 1495126913.0, "client_ip": "10.200.3.55", "remote_host": "201.83.41.11"}, {"timestamp": 1495126915.0, "client_ip": "10.200.3.55", "remote_host": "78.47.139.58"}, {"timestamp": 1495126913.0, "client_ip": "10.200.3.55", "remote_host": "175.106.59.78"}, {"timestamp": 1495126915.0, "client_ip": "10.200.3.55", "remote_host": "201.83.41.11"}]
print json.dumps(sorted(data, key=operator.itemgetter('remote_host', 'client_ip', 'timestamp')))

Answer 1

将getElementsByTagName("option")更改为document.getElementsByTagName("option")

Answer 2

用这个替换你的javascript代码。

document.getElementById("aloga").onchange = function(){
  var index = this.selectedIndex;
  var name = this.options[index].text;
  window.alert("Hello "+name);
}

jsFiddle链接https://jsfiddle.net/ueyorfej/

Answer 3

我同意brk的评论，但如果这不起作用，那么我会粘贴我的工作代码以供参考

注意：我已经在一个函数中嵌入了你的代码attachEvents（）也修改了

var bman = getElementsByTagName（＆＃34; option＆＃34;）to      var bman = document.getElementsByTagName（＆＃34; option＆＃34;）如下所示

        <html>
        <script> 
         function attachEvents(){
         function getEventTarget(e) {
         e = e || window.event;
         return e.target || e.srcElement; 
         }
         var ul = document.getElementById("aloga");
         ul.onclick = function(event) {
         var target = getEventTarget(event);
         var bman = document.getElementsByTagName("option")
         if (target.selectedIndex == "0") {
            window.alert("Hello Peter")
         } else if (target.selectedIndex == "1") {
            window.alert("Hello Paul")
         } else {
            window.alert("Hello Penn")
         }
         };
         }
         </script>
        Then here is the HTML code below:
        <body onload="attachEvents()">
         <select name="aloga" data-placeholder="Select your aloga" id="aloga"      class="form-control input-lg select2">
         <option value="1" data-code="A" selected > Peter </option>
         <option value="2" data-code="B"> Paul </option>
         <option value="3" data-code="C"> Penn </option>
         </select>
         </body>
         </html>

Javascript listindex事件处理

3 个答案:

注意：我已经在一个函数中嵌入了你的代码attachEvents（）也修改了