Question

我有循环创建的select下拉菜单，并且在选择选项时会触发onchange事件。 get()功能是ajax来电。

HTML code：

  <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

请试试这个。您可以通过设置属性将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>

Answer 2

这可能对你有帮助。

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

或者这个。我怀疑你是通过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 3

我想说，试试这个，要确切地说出你想要的东西有点难，但是随后将DOM元素添加到文档中，你必须使用jQuery on并传入一个上下文。 / p>

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

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

来自jQuery文档：

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

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

触发onChange事件为循环选择创建

3 个答案: