Select2 .val函数在使用'nearest'选择时返回空值：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.

我有一个包含复选框,一些文本和select2下拉列表的表。用户将选中一个复选框,然后在select2下拉列表中选择一个值。我试图找出用户是否在select2框中选中了与复选复选框对应的值。

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.

在上面的代码中,当我遍历所有复选框时,.val()函数给出了正确的值。就是这部分。

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.

但是当我发现selectval框对应于下面的复选复选框时,.val()函数总是返回空字符串。

$(".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

我正在使用select2 3.5.2

1 个解决方案

#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):

select2将输入中的类复制为它生成的非表单控件结构的一部分。生成的结构(当前是span)将是find返回的jQuery集中的第一个,而val只尝试从集合中的第一个元素读取,因此将返回undefined。只需向选择器添加输入,这样您就可以找到输入(选择2隐藏但保持最新):

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>