CODEWITHSUNDEEP
jquery
IgorAlves
IgorAlves

Reputation: 5556

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

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>

Upvotes: 0

Views: 90

Answers (5)

shilpi
shilpi

Reputation: 108

use 

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

Upvotes: 1

HenryDev
HenryDev

Reputation: 4993

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>

Upvotes: 0

rogeriolino
rogeriolino

Reputation: 1135

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>

Upvotes: 1

Bryan Dellinger
Bryan Dellinger

Reputation: 5304

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

Upvotes: 0

marcan2020
marcan2020

Reputation: 609

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

Upvotes: 0

Related Questions