JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<input type="radio" value="1" name="enable">1 <br>
<input type="radio" value="2" name="enable">2 <br>


<select id="Reden">
  <option class=1 value="1" disabled="">1</option>
  <option class=1 value="2" disabled="">2</option>
  <option class=1 value="3" disabled="">3</option>
  <option class=2 value="4" disabled="">4</option>
  <option class=2 value="5" disabled="">5</option>
  <option class=2 value="6" disabled="">6</option>
</select>

JavaScript

var select = document.getElementById("Reden")
var enabler = document.getElementsByName("enable")
var allOptions = select.getElementsByTagName("option");

// Add a listener for the radio changes
for (var i = 0, len = enabler.length; i < len; i++) {
  enabler[i].addEventListener('click', optionToggle);
}

// Disables all options and reenables those that match the value of the radio
function optionToggle() {
  filterOptions = select.getElementsByClassName(this.value)
  select.value = ""
  setDisabled(allOptions, true)
  setDisabled(filterOptions, false)
}

function setDisabled(targetList, value) {
  for (var i = 0; i < targetList.length; i++) {
    targetList[i].disabled = value;
  }
}