jQuery: Setting value of select box based on another checkbox

I have following scenario. When I click on a value from the table , I'm trying to set the value of the select box to the clicked value. But only those select boxes , where the checkboxes are checked should be set.

I tried using :eq , but couldn't figure out the exact way. Is there a way to achieve this ?

Here is my sample code.

( there may be other columns in between the select and checkbox column , This is part of a bigger problem and what i have created is a sample )

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>

Answers 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>


Related Articles