jQuery: Setting value of select box based on another checkbox

Question

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>

I have no idea what you are trying to achieve. try explaining in more detail. — BenG
– BenG, Commented Mar 25, 2016 at 8:27
Simply put , when clicked on a value in the table , i want that value to be selected inside the select box - only if the corresponding checkbox is checked. — Sooraj
– Sooraj, Commented Mar 25, 2016 at 8:35

Tomalak · Accepted Answer · 2016-03-25 08:39:00Z

2

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>

edited Mar 25, 2016 at 8:39

answered Mar 25, 2016 at 8:31

Tomalak

340k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BenG Over a year ago

i'm not 100% clear what the requirements are but I did see this - But only those select boxes , where the checkboxes are checked should be set.

Sooraj Over a year ago

I'm trying to set the select box , only if the corresponding checkbox is checked.

BenG Over a year ago

so all selects which are checked should be set to the same clicked value?

Sooraj Over a year ago

Yes , exactly that is what I am trying to achieve.

Tomalak Over a year ago

@BenG You are right, and that's what it should have done - I was not aware that :checked also matches <select> elements. Changing it to :checkbox:checked fixes that.

Collectives™ on Stack Overflow

jQuery: Setting value of select box based on another checkbox

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related