How to retrieve values in a dynamically generated element using jQuery?

Question

Elements "SelectB" and "SelectC" were dynamically generated.
When user changes something in "SelectB" I need to grab its value and "SelectC" value.

$('#SelectB').on('change',function() {
    var valB = $(this).val();
    var valC = $("#SelectC").val();
    console.log(valB); //Works good, because $('#SelectB').on ....
    console.log(valC); //Undefined    
});

So in this scenario how could I retrieve "SelectC" value?

This is the html (simplified), only example;

<select id="SelectB">
  <option value="0">Volvo</option>
  <option value="1">Saab</option>
  <option value="2">Mercedes</option>
  <option value="3">Audi</option>
</select>

<select id="SelectC">
  <option value="0">Volvo</option>
  <option value="1">Saab</option>
  <option value="2">Mercedes</option>
  <option value="3">Audi</option>
</select>

You may want to post sample html as well, and console.log($("#SelectC")); — i--
– i--, Commented Dec 2, 2016 at 2:11
You need to make sure that there's an element with the id SelectC. — marcan2020
– marcan2020, Commented Dec 2, 2016 at 2:13
If there's a parent element that was there on load, try valC = $('#parent').find($('#SelectC')).val(); — sideroxylon
– sideroxylon, Commented Dec 2, 2016 at 2:16
it is not a parent. They are independent. I think the HTML I put can vige a better idea. They were not here on load. They were created later, dynamically — IgorAlves
– IgorAlves, Commented Dec 2, 2016 at 2:18

shilpi · Accepted Answer · 2016-12-02 03:33:17Z

1

use

 $(document).on('change', ['#SelectB','#SelectC'], function(){
   var valB = $("#SelectB").val();
   var valC = $("#SelectC").val();
   console.log(valB);
   console.log(valC);
 });

edited Dec 2, 2016 at 3:33

answered Dec 2, 2016 at 2:36

shilpi

1081 silver badge5 bronze badges

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

Comments

rogeriolino · Accepted Answer · 2016-12-02 02:32:52Z

You can use a generic algorithm to discover the pair of values based on data-attribute. The source bellow will show a alert window when fill both values.

$('select').on('change',function() {
  var elem = $(this),
      id = elem.attr('id'),
      val1 = null,
      val2 = null,
      next = $(elem.data('next')),
      prev = null;
  
  if (next.length) {
    val1 = elem.val();
    val2 = next.val();
  } else {
    prev = $('[data-next="#' + id + '"]');
    val1 = prev.val();
    val2 = elem.val();
  }
  
  if (val1 && val2) {
    alert('val1: ' + val1 + ', val2: ' + val2);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<select id="#SelectB" data-next="#SelectC">
    <option value="">select</option>
    <option value="0">Volvo</option>
    <option value="1">Saab</option>
    <option value="2">Mercedes</option>
    <option value="3">Audi</option>
</select>

<select id="SelectC">
    <option value="">select</option>
    <option value="0">Volvo</option>
    <option value="1">Saab</option>
    <option value="2">Mercedes</option>
    <option value="3">Audi</option>
</select>

marcan2020 · Accepted Answer · 2016-12-02 02:25:17Z

0

I did some test and the only way to have $("#SelectC").val() === undefined is that the element is not created.

It's probably because you create SelectB before SelectC.

What it does is:

// SelectB.val() === undefined
// SelectC.val() === undefined
// SelectB created
// SelectB.val() === 0
// SelectC.val() === undefined

Try to create SelectC before or wait that they are both created before subscribing to the change.

It should work now:

// SelectC.val() === undefined
// SelectB.val() === undefined
// SelectC created
// SelectC.val() === 0
// SelectB.val() === undefined
// SelectB created
// SelectC.val() === 0
// SelectB.val() === 0

answered Dec 2, 2016 at 2:25

marcan2020

6096 silver badges14 bronze badges

Comments

Bryan Dellinger · Accepted Answer · 2016-12-02 02:28:51Z

here is a solution http://jsfiddle.net/LkqTU/32671/

<select id="SelectB">
  <option value="0">Volvo</option>
  <option value="1">Saab</option>
  <option value="2">Mercedes</option>
  <option value="3">Audi</option>
</select>

javascript

$( document ).ready(function() {
    var myhtml = '<select id="SelectC">'
    myhtml += '<option value="0">Volvo</option>'
    myhtml += '<option value="1">Saab</option>'
    myhtml += '<option value="2">Mercedes</option>'
     myhtml += '<option value="3">Audi</option>'
      myhtml += '</select>'
      $('body').append(myhtml);
});


$('#SelectB').on('change',function() {
    var valB = $(this).val();
    var valC = $("#SelectC").val();
    alert(valB); //Works good, because $('#SelectB').on ....
    alert(valC); //Undefined    
});

HenryDev · Accepted Answer · 2016-12-02 02:49:01Z

0

Here's a working solution. Hope it helps!

$(document).ready(function(){
    $('select').on("change",function() {
    alert("SelectB value is: "+ $("#SelectB option:selected").val() + "\n"+ 
        "SelectC value is: " + $("#SelectC option:selected").val());
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="SelectB">
  <option value="0">Volvo</option>
  <option value="1">Saab</option>
  <option value="2">Mercedes</option>
  <option value="3">Audi</option>
</select>

<select id="SelectC">
  <option value="0">Volvo</option>
  <option value="1">Saab</option>
  <option value="2">Mercedes</option>
  <option value="3">Audi</option>
</select>

edited Dec 2, 2016 at 2:49

answered Dec 2, 2016 at 2:27

HenryDev

5,0136 gold badges31 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to retrieve values in a dynamically generated element using jQuery?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related