触发onChange事件创建循环选择

Question

我有select下拉列表中创建循环和onchange事件时，选择一个选项被触发。 get()函数是一个ajax调用。

HTML代码：

<select id="id1" name="name[]" onChange="get(1)"> 
    <option>....</option> 
    </select> 
    <select id="id2" name="name[]" onChange="get(2)"> 
    <option>....</option> 
    </select> 
    <select id="id3" name="name[]" onChange="get(3)"> 
    <option>....</option> 
    </select> 

Ajax代码：

url = "ajax.php?item="; 
    function get(id) { 
     var sId = document.getElementById("id"+id).value; 
     http.open("GET", url + escape(sId) + "&did="+id, true); 
     http.onreadystatechange = function() { 
       if (http.readyState == 4) { 
        if(http.status==200) { 
         var results = http.responseText; 
         document.getElementById("showdiv"+id).innerHTML = results; 

         document.getElementById('ajaxdiv'+id).style.display = ''; 
         document.getElementById('showdiv'+id).style.display = ''; 
         document.getElementById('price'+id).focus(); 

        } 
       } 
      } 
     http.send(null); 
    } 

    function getHTTPObject() { 
     var xmlhttp; 

     if (window.XMLHttpRequest) { 
      xmlhttp = new XMLHttpRequest(); 
     } else if (window.ActiveXObject) { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      if (!xmlhttp) { 
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
      } 

     } 
     return xmlhttp; 


    } 
    var http = getHTTPObject(); 

当我手动选择这工作得很好，我现在想的是，本应在页面加载的所有触发器本身。

我试过window.onload但只有一个和第一个选项出现。我应该用什么来触发所有的onchange事件。

Answer 1

这可能会帮助你。

$(document).ready(function(){ 
    $("select").on('change', function(){ 
     var $this = $(this); 
    }); 
}); 

or this one。我怀疑你通过javascript/jquery加载元素，这就是为什么事件不会触发。

$(document).ready(function(){ 
    $(document).on('change', '.selecta', function(){ 
    }); 
}); 

试着看看这个。 它可能给你一个想法：jQuery .on() event doesn't work for dynamically added element

这里有一个小提琴：https://jsfiddle.net/md7g2uy9/

Answer 2

我会说，试试这个，这是一个有点很难说你想要什么，但DOM元素后来被补充说，对于文档，您必须使用jQuery on并传入上下文。

上下文是页面加载时在DOM中的元素，它包含稍后添加的元素。

$(document).ready(function(){ 
    $("select").on('change', 'context', function(){ // add the selector where it says context 
     var $this = $(this); 
    }); 
}); 

从jQuery文档：

的事件处理程序仅结合到当前选择的元素;它们必须在您的代码调用.on（）时存在。

委托事件的优点是它们可以处理后来添加到文档中的后代元素的事件。通过选择在委托事件处理程序附加时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序的需要。该元素可以是模型 - 视图 - 控制器设计中的视图的容器元素，例如，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此在不等待文档准备就绪的情况下在其中附加事件是安全的。

Answer 3

请试试这个。您可以通过设置属性将id传递到函数中。

$(document).ready(function(){ 
 
     $(document).on('change', 'select', function(){ 
 
     console.log($(this).attr('value')); 
 
    //call get($(this).attr('value')) 
 
     }); 
 
     $('select').trigger('change') 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="id1" value="1" name="name1" > 
 
    <option>asd</option> 
 
    <option>sasd</option> 
 
    </select> 
 
    <select id="id2" value="2" name="name2" > 
 
    <option>sda</option> 
 
    <option>sdasda</option> 
 
    </select> 
 
    <select id="id3" name="name3" value="3"> 
 
    <option></option> 
 
    </select>