javascript - jQuery:根据另一个复选框设置选择框的值

Question

我有以下场景。当我单击表中的值时，我尝试将选择框的值设置为单击的值。但只应设置那些选中复选框的选择框。

我尝试使用 :eq ，但无法找出确切的方法。有没有办法实现这一点？

这是我的示例代码。

(选择列和复选框列之间可能还有其他列，这是一个更大问题的一部分，我创建的是一个示例)

var selectValues = ["-","somevalue1", "somevalue2", "somevalue3", "somevalue4", "somevalue5", "somevalue6", "somevalue7", "somevalue8", "somevalue9", "somevalue10"];

for (var i=0;i<selectValues.length;i++){
   $('<option/>').val(i).html(selectValues[i]).appendTo('.selectbox');
}


$("#sample td").click(function() {
  var clickedValue = $(this).text();
  console.log(clickedValue);
  
  $('.selectbox').val(clickedValue);
});

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
#sample tr {
  border: 1px solid #ccc;
}
td {
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="sample">
  <table>
    <thead>
      <tr>
        <td>something</td>
        <td>something else</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>somevalue1</td>
        <td>somevalue2</td>
      </tr>
      <tr>
        <td>somevalue3</td>
        <td>somevalue4</td>
      </tr>
      <tr>
        <td>somevalue5</td>
        <td>somevalue6</td>
      </tr>
      <tr>
        <td>somevalue7</td>
        <td>somevalue8</td>
      </tr>
      <tr>
        <td>somevalue9</td>
        <td>somevalue10</td>
      </tr>

    </tbody>
  </table>
</div>


<table>
  <tr>
    <td>
      <input type="checkbox" class="checkbox">
    </td>
    <td>
      <select class="selectbox"></select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox">
    </td>
    <td>
      <select class="selectbox"></select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox">
    </td>
    <td>
      <select class="selectbox"></select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox">
    </td>
    <td>
      <select class="selectbox"></select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox">
    </td>
    <td>
      <select class="selectbox"></select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox">
    </td>
    <td>
      <select class="selectbox"></select>
    </td>
  </tr>
</table>

Answer 1

var selectValues = ["-", "somevalue1", "somevalue2", "somevalue3", "somevalue4", "somevalue5", "somevalue6", "somevalue7", "somevalue8", "somevalue9", "somevalue10"];

$.each(selectValues, function (i, val) {
  $('<option/>', {value: val, text: val}).appendTo('.selectbox');
});

$("#sample").on("click", "td", function() {
  var clickedValue = $(this).text();
  $("#target :checkbox:checked").closest("tr").find(".selectbox").val(clickedValue);
});

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  float: left;
}
#sample tr {
  border: 1px solid #ccc;
}
td {
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="sample">
  <table>
    <thead>
      <tr><td>something</td><td>something else</td></tr>
    </thead>
    <tbody>
      <tr><td>somevalue1</td><td>somevalue2</td></tr>
      <tr><td>somevalue3</td><td>somevalue4</td></tr>
      <tr><td>somevalue5</td><td>somevalue6</td></tr>
      <tr><td>somevalue7</td><td>somevalue8</td></tr>
      <tr><td>somevalue9</td><td>somevalue10</td></tr>
    </tbody>
  </table>
</div>

<table id="target">
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td><select class="selectbox"></select></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td><select class="selectbox"></select></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td><select class="selectbox"></select></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td><select class="selectbox"></select></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td><select class="selectbox"></select></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td><select class="selectbox"></select></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td><select class="selectbox"></select></td>
  </tr>
</table>