How to change the dropdown option based on the checkbox selection in javascript?

Question

how to change the dropdown based on the checkbox selection.

function checbocChecked(event) {
  let check = document.querySelectorAll('input[type=checkbox]:checked').length;
  alert(check)
  if (check > 1) {
    //here how can i manipulate all the dropdown such that it become MULTIPLE
  } else {
    //here how can i manipulate all the dropdown such that it become SINGLE
  }
}

<table>
  <thead>
    <tr>
      <td>Checbox</td>
      <td>Key</td>
      <td>Value</td>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" onclick="checbocChecked(event)"></td>
        <td><input type="numeric" value=1></td>
        <td>
          <select>
            <option value="SINGLE">SINGLE</option>
            <option value="MULTIPLE">MULTIPLE</option>
          </select>
      </tr>
      <tr>
        <td><input type="checkbox" onclick="checbocChecked(event)"></td>
        <td><input type="numeric" value=2></td>
        <td>
          <select>
            <option value="SINGLE">SINGLE</option>
            <option value="MULTIPLE">MULTIPLE</option>
          </select>
      </tr>
    </tbody>
</table>

<div id="final"></div>

If single check box is selected then all the dropdown in the table should hold SINGLE as a option value if more than one checkbox is selected then all the dropdown will hold MULTIPLE as a option value

what i tried is above

Does this answer your question? [How do I programmatically set the value of a select box element using JavaScript?](https://stackoverflow.com/questions/78932/how-do-i-programmatically-set-the-value-of-a-select-box-element-using-javascript) — Heretic Monkey, Jan 26 '21 at 16:53

score 1 · Accepted Answer · answered Jan 26 '21 at 16:49

Just loop through the select fields and update value accordingly.

function checbocChecked(event) {
  let check = document.querySelectorAll('input[type=checkbox]:checked').length;
  alert(check)
  if (check > 1) {
    //here how can i manipulate all the dropdown such that it become MULTIPLE
    let elements = document.querySelectorAll('select');
    for (var i=0; i < elements.length; i++) {
      elements[i].value = "MULTIPLE";
    }    
  } else {
    //here how can i manipulate all the dropdown such that it become SINGLE
    let elements = document.querySelectorAll('select');
    for (var i=0; i < elements.length; i++) {
      elements[i].value = "SINGLE";
    }
  }
}

<table>
  <thead>
    <tr>
      <td>Checbox</td>
      <td>Key</td>
      <td>Value</td>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" onclick="checbocChecked(event)"></td>
        <td><input type="numeric" value=1></td>
        <td>
          <select>
            <option value="SINGLE">SINGLE</option>
            <option value="MULTIPLE">MULTIPLE</option>
          </select>
      </tr>
      <tr>
        <td><input type="checkbox" onclick="checbocChecked(event)"></td>
        <td><input type="numeric" value=2></td>
        <td>
          <select>
            <option value="SINGLE">SINGLE</option>
            <option value="MULTIPLE">MULTIPLE</option>
          </select>
      </tr>
    </tbody>
</table>

<div id="final"></div>

Thanks @iamdlm what if i have other checkbox presest in dom but not in table can i use this ```let check = document.querySelectorAll('table tbody tr input[type=checkbox]:checked').length;``` so that only checkbox inside of table should be picked — Parth Tiwari, Jan 26 '21 at 16:57

How to change the dropdown option based on the checkbox selection in javascript?

1 Answers1