Sooraj Chandran Sooraj Chandran - 7 months ago 7
Javascript Question

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

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

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>