Select2 .val function returning empty value when selected using 'closest' : jQuery

Question

I have a table containing a checkbox , some text and a select2 dropdown. The user will select a checkbox and then select a value in select2 drop down. I'm trying to find out if the user has selected a value in the select2 box corresponding to the checked checkboxes.

Following is my code:

 var value = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }] $(document).ready(function() { $(".bulk_relationship_dropdown").select2({ data: value }) $("#submit").click(function() { jQuery(".bulk_relationship_dropdown").each(function() { if (jQuery(this).val() != "") { console.log(jQuery(this).val()); } }) $(".cb:checked").each(function() { var cb = $(this); if (cb.closest('tr').find('.bulk_relationship_dropdown').val() == "") { console.log("here"); //do something } }) }); }); 

 .select2-container { margin-top: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" /> <br> <table> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> </table> <button id="submit">submit</button> 

In the above code when I iterate through all the checkboxes .val() function gives me correct values. That is this portion.

jQuery(".bulk_relationship_dropdown").each(function() {
          if (jQuery(this).val() != "") {
            console.log(jQuery(this).val());
          }

        })

But when I find the select2 boxes corresponding to checked checkboxes like below the .val() function is always returning empty string.

$(".cb:checked").each(function() {
          var cb = $(this);
          if (cb.closest('tr').find('.bulk_relationship_dropdown').val() == "") {
            console.log("here"); //do something
          }
        })

What am i doing wrong?

I'm using select2 3.5.2

Answer 1

select2 duplicates the classes on your input as part of a non-form-control structure it generates. That generated structure (currently a span ) will be the first one in the jQuery set returned by find , and val only tries to read from the first element in the set, so will return undefined . Just add input to your selectors so you're finding your inputs instead (which select2 hides but keeps up-to-date):

cb.closest("tr").find("input.bulk_relationship_dropdown")
// --------------------^^^^^

Updated snippet:

 var value = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }] $(document).ready(function() { $(".bulk_relationship_dropdown").select2({ data: value }) $("#submit").click(function() { jQuery("input.bulk_relationship_dropdown").each(function() { if (jQuery(this).val() != "") { console.log(jQuery(this).val()); } }) $(".cb:checked").each(function() { var cb = $(this); if (cb.closest('tr').find('input.bulk_relationship_dropdown').val() == "") { console.log("here"); //do something } }) }); }); 

 .select2-container { margin-top: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" /> <br> <table> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> <tr> <td> <input type="checkbox" class="cb"> </td> <td>some random text</td> <td> <input type="text" style="width: 120px" class="bulk_relationship_dropdown"> </td> </tr> </table> <button id="submit">submit</button>