Select option by value and change attribute of a selected option

Question

So what I want is to automatically select options in SELECT_1 and SELECT_2 by clicking radio (Yes or No) and set the selected attribute to those options in SELECT_1 and SELECT_2

What I have is:

function selectThis (){
                var crytRadioYes = document.getElementById("cryteria_yes");
                var crytRadioNo = document.getElementById("cryteria_no");
                var selects = document.getElementById("slctbox");

                if (crytRadioYes.checked == true){
                    selects.value = "Good";
                } else {
                    selects.value = "Bad";
                }

                if (crytRadioNo.checked == true){
                    selects.value = "Bad";
                } else {
                    selects.value = "Good";
                }
            }

<table>
                <!-- choose -->
                <tr>
                    <td style="width: 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_yes" onclick="selectThis()" />Yes</label></td>
                    <td style="width: 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_no" onclick="selectThis()" />No</label></td>
                </tr>
            </table>
            <table>
                <!-- SELECT_1 -->
                <tr>
                    <td>Cryteria 1</td>
                    <td>
                        <select id="slctbox">
                            <option value="-">-</option>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>
                        </select>
                    </td>
                </tr>
                <!-- SELECT_2 -->
                <tr>
                    <td>Cryteria 2</td>
                    <td>
                        <select id="slctbox">
                            <option value="-">-</option>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>
                        </select>
                    </td>
                </tr>
            </table>

As u see it changes value of SELECT_1 by clicking radio, but does not change the value in SELECT_2. I also dont know how to set attribute "selected"

please help :(

id attribute needs to be unique..

Rayon
– Rayon

2022-09-23 10:32:25 +00:00
Commented Sep 23, 2022 at 10:32 — Rayon
– Rayon, Commented Sep 23, 2022 at 10:32

Rayon · Accepted Answer · 2022-09-23 10:35:09Z

1

By definition, id attribute needs to be unique.

Simple workaround is to use class attribute and loop over elements having the specified class.

Use querySelectorAll to get the list of the document's elements that match the specified group of selectors.

function selectThis() {
  var crytRadioYes = document.getElementById("cryteria_yes");
  var crytRadioNo = document.getElementById("cryteria_no");
  var selects = document.querySelectorAll(".slctbox");

  if (crytRadioYes.checked == true) {
    selects.forEach(sel => sel.value = "Good");
  } else {
    selects.forEach(sel => sel.value = "Bad");
  }

  if (crytRadioNo.checked == true) {
    selects.forEach(sel => sel.value = "Bad");
  } else {
    selects.forEach(sel => sel.value = "Good");
  }
}

<table>
  <!-- choose -->
  <tr>
    <td style="width: 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_yes" onclick="selectThis()" />Yes</label></td>
    <td style="width: 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_no" onclick="selectThis()" />No</label></td>
  </tr>
</table>
<table>
  <!-- SELECT_1 -->
  <tr>
    <td>Cryteria 1</td>
    <td>
      <select class="slctbox">
        <option value="-">-</option>
        <option value="Good">Good</option>
        <option value="Bad">Bad</option>
      </select>
    </td>
  </tr>
  <!-- SELECT_2 -->
  <tr>
    <td>Cryteria 2</td>
    <td>
      <select class="slctbox">
        <option value="-">-</option>
        <option value="Good">Good</option>
        <option value="Bad">Bad</option>
      </select>
    </td>
  </tr>
</table>

answered Sep 23, 2022 at 10:35

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

2 Comments

Matthew Over a year ago

Thank you for your help, and now how Can I set attribute "selected" to "selected" for those options?

Rayon Over a year ago

@Matthew - You don't need to. If you want to access the value, use SELECT_ELEMENT.value

Collectives™ on Stack Overflow

Select option by value and change attribute of a selected option

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related