Trigger onChange Event for Created in Loop Selects

Question

I have select dropdowns which are created in loop and an onchange event is triggered when an option is selected. get() function is an ajax call.

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 code:

 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();

This works fine when I select manually, what I want now is, this should all trigger by itself on the page load.

I tried with window.onload but only one and the first option shows up. What should I use to trigger all onchange events.

add event handlers then call the change event like `$(document).on('change','select',function(){}).trigger('change')` — guradio, Apr 26 '17 at 04:53
dynamically created mean it will be loaded on the screen according to the user action on page. right? so when page is already loaded and you did something then its loading these dropdown. if this is the case then how we will bind on page load?? because these are being loaded after page load. — Deepak Sharma, Apr 26 '17 at 04:55
please provide the standard data .. you are struggling with .. kindly update your quection — UJS, Apr 26 '17 at 04:59
You should post the code you wrote to call each of these change functions, maybe the problem isn't where you think it is. — Tibrogargan, Apr 26 '17 at 05:03
this didn't work, $("#id1,#id2,#id3").change(function() { get(1);get(2);get(3); }); — yuri1000, Apr 26 '17 at 05:06

Rohith K P · Accepted Answer · 2017-04-26T05:42:21.230

1

Please try this. You can pass the id into the function by setting an attribute.

    $(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>

edited Apr 26 '17 at 05:42

answered Apr 26 '17 at 05:28

Rohith K P

3,233
22
28

Out of 3 ajax call, only one loaded. get(3) ajax response is loaded and not the first 2. – yuri1000 Apr 26 '17 at 05:36
in your html code onchange function is not called, is it correct? – yuri1000 Apr 26 '17 at 05:41
@yuri1000 I have updated the answer, You have to call you ajax function `get` inside onChange. Also, the `Id` is now passed as an attribute. See the console messages..,the ids are getting printed correctly. you just have to pass them to your function. – Rohith K P Apr 26 '17 at 05:44
@yuri1000 you don't need onchange in HTML, as we are adding it as event listener via jquery. – Rohith K P Apr 26 '17 at 05:47
i manually calling `get(1)` but its not loading all 3, still loading 1 response – yuri1000 Apr 26 '17 at 05:50
@yuri1000 I have updated my answer. did you look it? I have commented where to call `get`. What do you mean manually calling? How will you get all response if you just call `get(1)`? – Rohith K P Apr 26 '17 at 05:52
`$(document).ready(function(){ $(document).on('change', 'select', function(){ //console.log('s'); get($(this).attr('value')) }); $('select').trigger('change') });` this is exactly what i tried and only one ajax response loaded. And also added value attributes to select. – yuri1000 Apr 26 '17 at 05:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142685/discussion-between-ninja-and-yuri1000). – Rohith K P Apr 26 '17 at 06:03

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

this might help you.

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

or this one. I'm suspecting that you load the element via javascript/jquery that's why the event won't triggered.

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

try also looking into this. it might give you an idea: jQuery .on() event doesn't work for dynamically added element

here's a fiddle: https://jsfiddle.net/md7g2uy9/

edited May 23 '17 at 10:31

Community

1
1

answered Apr 26 '17 at 05:09

Sam Teng Wong

2,379
5
34
56

no, its not working, there are other selects also excluding `name[]` in the form. – yuri1000 Apr 26 '17 at 05:13
can you add a class? just to specify what `select` you want to target. – Sam Teng Wong Apr 26 '17 at 05:13
Yes I did try with class,I tried with that too. $(document).ready(function(){ $(".selecta").on('change', function(){ var $this = $(this); }); }); – yuri1000 Apr 26 '17 at 05:17
@yuri1000 does it work? this select is loaded using javascript? – Sam Teng Wong Apr 26 '17 at 05:18
@yuri1000 I've update my answer try my other solution. – Sam Teng Wong Apr 26 '17 at 05:22
@yuri1000 weirdd,, do you have a jquerylibrary included? – Sam Teng Wong Apr 26 '17 at 05:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142684/discussion-between-yuri1000-and-sam-teng-wong). – yuri1000 Apr 26 '17 at 05:43

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

I would say, try this, it's a bit hard to tell exactly what you want, but with DOM elements that are later added to the document, you have to use jQuery on and pass in a context.

The context is an element that is in the DOM on page load and contains the elements that are added later.

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

From the jQuery docs:

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on().

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

@yuri1000, what element are you using for your context? And what are you logging to see if it works? — Brett East, Apr 26 '17 at 05:37

Trigger onChange Event for Created in Loop Selects

3 Answers3