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? — Heretic Monkey
– Heretic Monkey, Commented Jan 26, 2021 at 16:53

iamdlm · Accepted Answer · 2021-01-26 16:49:09Z

1

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>

answered Jan 26, 2021 at 16:49

iamdlm

1,9891 gold badge11 silver badges24 bronze badges

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

2 Comments

Parth Tiwari Over a year ago

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

iamdlm Over a year ago

Yes, same for select.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related