觸發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>