Select option dropdown not working with datatables

Question

--UPDATE--

here is my jsfiddle:

I have a jquery datatable (www.datatables.net) where one of the columns has a dropdown menu. I assigned a change listener to my select dropdown. My problem is the listener only activates if I the select dropdown on the first row is selected. My table currently has 20 rows, but the change listener/event only activates if the select on the top row is changed. Here's my table:

<table id="projects_table" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>Project Code</th>
              <th>Project Name</th>
              <th>Project Manager</th>
              <th>Client</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {{#each projects}}
            <tr>
              <td>{{projectcode}}</td>
              <td>{{projectname}}</td>
              <td>{{projectmanager}}</td>
              <td>{{client}}</td>
              <td>
                <select class="form-control" id="actions">
                  <option selected>Select action</option>
                  <option>View Details</option>
                  <option>Export to CSV</option>
                </select>
              </td>
            </tr>
            {{/each}}
          </tbody>
        </table>

Here's my .js file:

$("#actions").change(function() {
    alert('change!!'); ////only works if there's a change in the select dropdown on the first row
    console.log($(this).find("option:selected").text());
});

Can someone help?

Thanks in advance!

Unless I'm missing something, your code seems to work? Can you clarify what you expect to happen? jsfiddle.net/ufqhf3ew — Stevie
– Stevie, Commented Feb 4, 2016 at 17:43
Hi - I expect it to alert('change!!') everytime I click a different item on the dropdown menu. Right now it only works if i click a different item on the dropdown menu on the first row; if I click a different item on any other row, it doesn't work.. — Trung Tran
– Trung Tran, Commented Feb 4, 2016 at 17:49
i updated jsfiddle to make it easier to understand - jsfiddle.net/18g8np7b — Trung Tran
– Trung Tran, Commented Feb 4, 2016 at 17:53

Guilherme Lucena · Accepted Answer · 2017-06-29 11:53:22Z

2

try bind the event using a class , the id bind only works in one element because in the DOM shouldn't exist more than one element with the same id.

html:

<select class="form-control">
              <option selected>Select action</option>
              <option>View Details</option>
              <option>Export to CSV</option>
</select>

script:

$('.form-control').change(function() {
   console.log('change!!');
   console.log($(this).find("option:selected").text());
});

edited Jun 29, 2017 at 11:53

answered Feb 4, 2016 at 17:55

Guilherme Lucena

366 bronze badges

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

Comments

Stevie · Accepted Answer · 2016-02-04 17:59:21Z

The issue is that you're binding to an id - the intention of this attribute is that they should be unique in the DOM.

What you want to do is create a class and bind to that instead.

https://jsfiddle.net/18g8np7b/5/

HTML:

<table id="projects_table" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Project Code</th>
      <th>Project Name</th>
      <th>Project Manager</th>
      <th>Client</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc</td>
      <td>123</td>
      <td>abcd</td>
      <td>123d</td>
      <td>
        <select class="form-control" id="actions0">
          <option>Select action</option>
          <option>View Details</option>
          <option>Export to CSV</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>abc</td>
      <td>123</td>
      <td>abc</td>
      <td>123</td>
      <td>
        <select class="form-control" id="actions1">
          <option>Select action</option>
          <option>View Details</option>
          <option>Export to CSV</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>abc</td>
      <td>123</td>
      <td>abc</td>
      <td>123</td>
      <td>
        <select class="form-control" id="actions2">
          <option>Select action</option>
          <option>View Details</option>
          <option>Export to CSV</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>abc</td>
      <td>123</td>
      <td>abc</td>
      <td>123</td>
      <td>
        <select class="form-control" id="actions3">
          <option>Select action</option>
          <option>View Details</option>
          <option>Export to CSV</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

JS:

$('#projects_table').DataTable({
  responsive: true
});


$(".form-control").change(function(e) {
  alert('change!!'); //only works if there's a change in the select dropdown on the first row
  console.log($(this).find("option:selected").text());

  console.log(e.currentTarget)
});

Collectives™ on Stack Overflow

Select option dropdown not working with datatables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related