Select option by value and change attribute of a selected option

userpCxv 0
Viewed 11

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 :(

select javascript html
1 Answers

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>

Rayon0
Related