从所选复选框旁边的文本框中获取所选文本

Question

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

以下是我的代码：

$(document).ready(function() {
  console.log("ready!");

  $("#submit").click(function() {

    $(".cb:checked").each(function() {
      var cb = $(this);
      console.log(cb.find('select option:selected').text());
      if (cb.find('select option:selected').text() == "-") {
        cb.find('select').css("border-color", "red");
      }
    })
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
       <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
    <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
</table>
<button id="submit">
  Save
</button>

所选文本值似乎总是为空。我做错了什么？

Answer 1

我已使用closest()转到tr父标记，然后应用find转到相应的复选框。

＆＃13;

＆＃13;

$(document).ready(function() {
  console.log("ready!");

  $("#submit").click(function(e) {

    $(".cb:checked").each(function() {
      var cb = $(this);
      console.log(cb.closest('tr').find('select option:selected').text());
      if (cb.closest('tr').find('select option:selected').text() == "-") {
        cb.closest('tr').find('select').css("border-color", "red");
      }
    })
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
       <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
    <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
</table>
<button id="submit">
  Save
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您在每个复选框中都使用了.find()，它会搜索后代元素，但您的选择框不是复选框的后代。

您可以将.closest()与.find()合并，以定位与当前复选框对应的所选选项：

$(this).closest('tr').find('option').filter(':selected');

Answer 3

只需将脚本代码更改为

即可

$(document).ready(function() {
  console.log("ready!");

  $("#submit").click(function() {

    $(".cb:checked").each(function() {
      var cb = $(this).parent().parent();
      console.log(cb.find('select option:selected').text());
      if (cb.find('select option:selected').text() == "-") {
        cb.find('select').css("border-color", "red");
      }
	  else
		  cb.find('select').css("border-color", "");
    })
  });


});