how to get data- attributes in more than select input?

Question

$('select.dates').change(function() {
   $(this).closest('tr').find('input.numValue').val($(this.options[this.selectedIndex]).attr('data-value'));
});

  
function addnewrow()   
{  
var n=($('.table tr').length-0)+1;  
var tr = '<tr>'+  
 
'<td><select class="dates"><option value="select" data-value="">select</option><option value="value1" data-value="500">value1</option><option value="value2" data-value="300">value2</option><option value="value3" data-value="250">value3</option></select>'+
'<td><input type="text" class="numValue" value="" /></td>'+




'</tr>';  
$('.detail').append(tr);
    
}
$('#add').click(function()  
{
 
addnewrow();  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table">
<thead>
                  <th><input type="button" value="+" id="add" class="btnbtn-primary"></th>  
    <th>select</th>
    <th>value</th>

</thead>
<tbody class="detail">
<tr class="row">
<td>
<select class="dates">
    <option value="select" data-value="">select</option>
    <option value="value1" data-value="500">value1</option>
    <option value="value2" data-value="600">value2</option>
    <option value="value3" data-value="900">value3</option>
</select>
</td>
<td><input type="text" class="numValue" value="" /></td>
</tr>
<tr>
<td>
<select class="dates">
    <option value="select" data-value="">select</option>
    <option value="value1" data-value="500">value1</option>
    <option value="value2" data-value="300">value2</option>
    <option value="value3" data-value="250">value3</option>
</select>
</td>
<td>
<input type="text" class="numValue" value="" />
</td>
</tr>
<tr>
<td>
<select class="dates">
    <option value="select" data-value="">select</option>
    <option value="value1" data-value="500">value1</option>
    <option value="value2" data-value="300">value2</option>
    <option value="value3" data-value="250">value3</option>
</select>
</td>
<td>
<input type="text" class="numValue" value="" />
</td>
</tr>
</tbody>
</table>

$('select.dates').change(function() {
   $(this).next('input.numValue').val($(this.options[this.selectedIndex]).attr('data-value'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
  
    <th>select</th>
    <th>value</th>

</thead>
<tbody>
<tr class="row">
  <td>
  <select class="dates">
      <option value="1/1/11" data-value="num1">1/1/11</option>
      <option value="1/2/11" data-value="num2">1/2/11</option>
      <option value="1/3/11" data-value="num3">1/3/11</option>
  </select>
  </td>
  <td><input type="text" class="numValue" value="" /></td>
</tr>
<tr>
  <td>
    <select class="dates">
        <option value="1/1/11" data-value="num1">1/1/11</option>
        <option value="1/2/11" data-value="num2">1/2/11</option>
        <option value="1/3/11" data-value="num3">1/3/11</option>
    </select>
  </td>
  <td>
  <input type="text" class="numValue" value="" />
  </td>
</tr>
</tbody>
</table>

my problem here that when i'm add new row with addnewrow() function select function doesn't work with new row added but select function is working prefect with static row why this is happen ? please help me i'm still learning i want when i'm add new row with addnewrow() function select input work thanks in advance .

Mohamed-Yousef · Accepted Answer · 2018-12-23T08:40:49.133

To get the next input to the select use $(this).next('input.numValue')

$('select.dates').change(function() {
   $(this).next('input.numValue').val($(this.options[this.selectedIndex]).attr('data-value'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="dates">
    <option value="1/1/11" data-value="num1">1/1/11</option>
    <option value="1/2/11" data-value="num2">1/2/11</option>
    <option value="1/3/11" data-value="num3">1/3/11</option>
</select>
<input type="text" class="numValue" value="num1" />

<select class="dates">
    <option value="1/1/11" data-value="num1">1/1/11</option>
    <option value="1/2/11" data-value="num2">1/2/11</option>
    <option value="1/3/11" data-value="num3">1/3/11</option>
</select>
<input type="text" class="numValue" value="num1" />

After OP Updated

To binding event on dynamically generated elements you need to use $(document).on('change' , 'select.dates' , function(){ })
To get the related input $(this).closest('tr').find('input.numValue') get the parent row then find the input

$(document).ready(function(){
  $('#add').click(addnewrow); // add row click event
  $(document).on('change','select.dates',function() { // select change event
      $(this).closest('tr').find('input.numValue').val($(this.options[this.selectedIndex]).attr('data-value'));
  });
});


function addnewrow()   
{  
  var n=($('.table tr').length-0)+1;  
  var tr = '<tr>'+ 
  '<td><select class="dates"><option value="select" data-value="">select</option><option value="value1" data-value="500">value1</option><option value="value2" data-value="300">value2</option><option value="value3" data-value="250">value3</option></select>'+
  '<td><input type="text" class="numValue" value="" /></td>'+
  '</tr>';  
  $('.detail').append(tr);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table">
   <thead>
    <th><input type="button" value="+" id="add" class="btnbtn-primary"></th>  
    <th>select</th>
    <th>value</th>
  </thead>
  <tbody class="detail">
    <tr class="row">
      <td>
        <select class="dates">
        <option value="select" data-value="">select</option>
        <option value="value1" data-value="500">value1</option>
        <option value="value2" data-value="600">value2</option>
        <option value="value3" data-value="900">value3</option>
        </select>
      </td>
      <td>
        <input type="text" class="numValue" value="" />
      </td>
    </tr>
    <tr>
      <td>
        <select class="dates">
        <option value="select" data-value="">select</option>
        <option value="value1" data-value="500">value1</option>
        <option value="value2" data-value="300">value2</option>
        <option value="value3" data-value="250">value3</option>
        </select>
      </td>
      <td>
        <input type="text" class="numValue" value="" />
      </td>
    </tr>
    <tr>
      <td>
        <select class="dates">
        <option value="select" data-value="">select</option>
        <option value="value1" data-value="500">value1</option>
        <option value="value2" data-value="300">value2</option>
        <option value="value3" data-value="250">value3</option>
        </select>
      </td>
      <td>
        <input type="text" class="numValue" value="" />
      </td>
    </tr>
  </tbody>
</table>

thanks very much but when i'm trying this code in table it's not run — Maher Adel Sultan, Dec 23 '18 at 06:10
@MaherAdelSultan this code run with the code you provide .. you need to provide code with table to let me see the whole picture — Mohamed-Yousef, Dec 23 '18 at 06:11
@MaherAdelSultan anyway let me assume the `select` on a column and the `input` on another column .. in this case you need to use `$(this).closest('tr').find('input.numValue')` — Mohamed-Yousef, Dec 23 '18 at 06:24
you totally welcome @MaherAdelSultan .. Have a great day :-) — Mohamed-Yousef, Dec 23 '18 at 06:31

how to get data- attributes in more than select input?

1 Answers1