How to disable dropdown list on default using dropdown list option (Javascript,HTML)

Question

Greeting guys,

I'm new to this coding and requires help.

I want to make dropdown list B disable on default.

For example, in dropdown list A has "Yes", "No". If user select "Yes". Then the dropdown list B will be available to select. But default, the dropdown list A is always selected = "No".

Dropdown list B (Disable on default)

<label for="new">New staff join Date: </label>
              <form method="post" action="?">
              <select name="ckb" id="ck1">
              <option disabled selected="select">-----Select Cut-----</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>

Really appreciates the help :D

post your full code that is related to the problem and what have you tried so far? — Deepak Kamat, Jul 19 '22 at 05:20

score 0 · Answer 1 · answered Jul 19 '22 at 05:20

Display of dropdown B should be none like below:

<select id="B" style="display: none;">

And you should define a change event for dropdown A and in this event should check selected value of dropdown A; if it is Yes remove display: none from dropdown B's style else add display: none.

score 0 · Answer 2 · answered Jul 19 '22 at 05:23

You can check the value of dropdown A with JavaScript and add the disabled attribute to the dropdown B based on the value of the A.

This Stackoverflow thread shows a way on how to select a value from the dropdown list.

After you have selected the value, you can check it's value with a simple if-else statement and add an attribute with dropdownB.setAttribute('disabled') to dropdown B.

score 0 · Accepted Answer · answered Jul 19 '22 at 05:29

You could use:

document.getElementById("elementId").disabled = true;

Just change the value to true/false to disable and enable the element.
And for your dropdown on Yes/No you need to add onChange eventListener to your select and in the callback function add the code to disable when selected option is Yes.
For the default selected option in the YesNo select, just add selected attribute to the option you want to be selected on default.

function onChangeYesNo(option) {
  if(option.value == "Yes"){
    document.getElementById("dropwdown1").disabled = false;
  }else{
    document.getElementById("dropwdown1").disabled = true;
  }
}

<select id="yesNo" onchange="onChangeYesNo(this)">
  <option value="Yes">Yes</option>
  <option value="No" selected>No</option>
</select>

<select id="dropwdown1" disabled="true">
  <option value="val1">val1</option>
  <option value="val2">val2</option>
</select>

Thank you so much, it solved the problem :D Appreciates ! – DTech Jul 20 '22 at 02:19 — DTech, Jul 20 '22 at 02:19

score 0 · Answer 4 · answered Jul 19 '22 at 05:30

Here is one way to do it:

const one=document.getElementById("yesno"),
two=document.getElementById("ck1");
 
one.onchange=()=>two.style.display=one.value=="Yes"?"":"none"

<label for="new">New staff join Date: </label>
<form method="post" action="?">
  <select id="yesno">
    <option>No</option>
    <option>Yes</option>
  </select>
  <select name="ckb" id="ck1" style="display:none">
    <option disabled selected="select">-----Select Cut-----</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
  </select>
</form>

How to disable dropdown list on default using dropdown list option (Javascript,HTML)

4 Answers4