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

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

CodePudding user response：

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.

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

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>