使用'closest'选择时，Select2的.val函数返回空值：jQuery

Question

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

以下是我的代码：

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>

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

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

        })

但是，当我找到与选中复选框相对应的select2框时，像下面这样使用 .val() 函数总是返回空字符串。

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

我做错了什么吗？

我正在使用select2 3.5.2

- Sooraj

---

我已经在问题中添加了可工作的代码片段。 - Sooraj

抱歉，各位..我没有注意到.. - Guruprasad J Rao

请注意，在 Select2 4.0 中不存在这个问题，因为我们不再自动复制类。 - Kevin Brown-Silva

Answer 1

select2会复制您的上的类，作为它生成的非表单控件结构的一部分。该生成的结构（目前是一个）将是由find返回的jQuery集合中的第一个元素，因此val仅尝试从集合中的第一个元素读取，因此将返回undefined。只需将添加到选择器中，以便找到输入框（select2将其隐藏但保持最新状态）。

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

更新的代码片段：

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>

- T.J. Crowder