Show Hide Html Form Elements depending on last form elements choice

I just want to show or hide some of my HTML form elements obviously using java depending on the previous selection. I.e. if a user select Dyingtype drop-down “Bleached” obviously there is no need to show color selection radio buttons it only needs to show bleached white radio and when a user selects “Reactive” or “Vat” it only shows color selection radios and there is no need of bleached white radio button.

Please help I don’t know java at all only know PHP. My HTML code is below. Thanks

    <select name="dyingtype" class="formcss" id="10">
      <option value="0">Select Dying Type</option>
      <option value="1">Blaeached</option>
      <option value="2">Reactive Dyed</option>
      <option value="3">Vat Dyed</option>
    </select>
  </td>
</tr>
<tr>
  <td bgcolor="#FFFFFF" class="formcss"><label>Bleached/White</label></td>
  <td bgcolor="#FFFFFF">&nbsp;</td>
  <td bgcolor="#FFFFFF">
    <input
      name="color"
      type="radio"
      class="formcss1"
      id="11"
      value="1"
      checked="checked"
    />
  </td>
</tr>
<tr>
  <td bgcolor="#FFFFFF" class="formcss"><label>Dark Colors</label></td>
  <td bgcolor="#FFFFFF">&nbsp;</td>
  <td bgcolor="#FFFFFF">
    <input name="color" type="radio" class="formcss1" id="12" value="2" />
  </td>
</tr>
<tr>
  <td bgcolor="#FFFFFF" class="formcss"><label>Average colors</label></td>
  <td bgcolor="#FFFFFF">&nbsp;</td>
  <td bgcolor="#FFFFFF">
    <input name="color" type="radio" class="formcss1" id="13" value="3" />
  </td>
</tr>
<tr>
  <td bgcolor="#FFFFFF" class="formcss"><label>Pastel Colors</label></td>
  <td bgcolor="#FFFFFF">&nbsp;</td>
  <td bgcolor="#FFFFFF">
    <input name="color" type="radio" class="formcss1" id="14" value="4" />
  </td>
</tr>
<tr></tr>

Answer

Learning is great! It is clear you are an extreme beginner from calling JS Java, but this might help you get started in the right direction. Please note I’m not endorsing these methods, but I think it answers your question and will help you.

I suspect you will want to look into events: https://www.w3schools.com/jsref/event_onchange.asp

The idea is basically when a user selects a choice you need to hide / show elements that match.

Honestly, there are a lot of really great ways to do what you are asking, but since you are learning, executing a function from an event might be educational and I will try to keep it simple. What you will want to do is get all the elements you want to show, and change a style property. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById to make them visible.

Your code might include something like this:

function hideBleachButtons () {
  const bleachElement = document.getElementById(YOUR ELEMENT ID);
  bleachElement.style.property = 'set a val'
}

Here are a few videos with related material: https://www.youtube.com/watch?v=YrE62Dzg4oM, https://www.youtube.com/watch?v=IBVvDMUaYpI