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

jQuery: Setting value of select box based on another checkbox

本文关键字:选择 设置 复选框 另一个 jQuery      更新时间:2023-09-26

我有以下场景。当我点击表中的一个值时,我试图将选择框的值设置为点击的值。但是,应该只设置那些选中复选框的选择框。

我试着使用: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>

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>