jquery .change inside loop

Question

Let say i have this code

HTML

<select id="id1">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<select id="id2">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<select id="id3">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>

Javascript

var i;
for (i = 1; i <= 3; i++) {
$('#id'+[i]).change(function(){
    $("#result"+[i]).html('<p>Number</p>'+[i]);                 
  });
}

JS Fiddle

Different <select> id and different result <div> id through loop

I just want, each <select> tag change, show the result through the div based on the id

Like this:

<select> id1 change to b, then div1 show b

<select> id2 change to c, then div2 show c

<select> id3 change to a, then div3 show a

In my example fiddle, the code i write is not working, can you please help me?

Thank you in advance

Add clases to your selects, register event for that class. Do not use loops to register .change() events. id attribute must be unique — Artur Filipiak
– Artur Filipiak, Commented Mar 11, 2015 at 4:52

cssyphus · Accepted Answer · 2015-03-11 15:30:44Z

4

This should do what you want:

var i, j;
$('select').change(function(){    
    i = this.id.slice(2);
    j = this.value;
    $("#result"+i).html('<p>Number: '+j+'</p>');
});

jsFiddle Demo

References:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

edited Mar 11, 2015 at 15:30

answered Mar 11, 2015 at 4:55

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Syarif Hidayatullah Lubis Over a year ago

WHAT THE HELL.. Its work like a charm... Thank you very much for saving my day :).. and thanks for the simple code and the example :)

balajisoundar · Accepted Answer · 2015-03-11 05:16:25Z

2

try this code.

var i;
for (i = 1; i <= 3; i++) {
$('#id'+i).change((function(a){
            return function()
            {                   
                $("#result"+a).html('<p>Number '+a+'</p>');
            };  
        })(i));   
}

and change your select elements id to id1,id2,id3

answered Mar 11, 2015 at 5:16

balajisoundar

5712 silver badges11 bronze badges

1 Comment

Syarif Hidayatullah Lubis Over a year ago

this is right too.. just need add some code, then.. working too.. thanks for your answer

Jenish Rabadiya · Accepted Answer · 2015-03-11 04:50:45Z

0

In this case I would suggest you should use data- attribute of html to pass the related div id to the change event and get that id and change its html.

Try something like following.

var i;
for (i = 1; i <= 3; i++) {

  $('#id' + [i]).change(function() {
    console.log($(this).attr("data-shouldupdate"));
    $("#" + $(this).attr("data-shouldupdate")).html('<p>Number</p>' + $(this).attr("data-shouldupdate"));

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="id1" data-shouldupdate="result1">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<select id="id2" data-shouldupdate="result2">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<select id="id3" data-shouldupdate="result3">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>

edited Mar 11, 2015 at 4:50

answered Mar 11, 2015 at 4:44

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

1 Comment

Syarif Hidayatullah Lubis Over a year ago

this is working too.. thanks for your alternate answer

Collectives™ on Stack Overflow

jquery .change inside loop

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related