Show dropdown when option is selected in the another dropdown
Question
I have one main dropdown, when one of the option is selected in the dropdown, in the next text field another dropdown has to come with different values, and when other option is selected in the main dropdown in the text has to appear in the same text field. So basically my question is, how to add both text and dropdwon in the same input field when the option is selected in the dropdown.
I have tried to do the one part of the problem ie, when first two option is selected the value is appearing in input field, but I'm not able to make the dropdown appear in the input field when third option is selected.
Can anyone help me on this problem!
<html> <body> <label> Assets:</label> <select id="name" onchange="func()"> <option value=""></option> <option value="year">Calendar</option> <option value="the current month">Month</option> <option id="no-of-days">Days</option> </select><br><br> <label>Days:</label> <input type="text" id="days"> <script> function func() { var dropdown = document.getElementById("name"); var selection = dropdown.value; console.log(selection); var TextBox = document.getElementById("days"); TextBox.value = selection; document.getElementById('no-of-days').onclick = function() { var values = ["1", "2", "3", "4"]; var select = document.createElement("select"); select.name = "date"; select.id = "date" for (const val of values) { var option = document.createElement("option"); option.value = val; option.text = val.charAt(0).toUpperCase() + val.slice(1); select.appendChild(option); } var label = document.createElement("label"); label.innerHTML = "Choose your date: " label.htmlFor = "date"; document.getElementById("container").appendChild(label).appendChild(select); } } </script> </body> </html>
1 answers
solution1
0 ACCPTED 2020-07-25 16:15:28
You are not selecting the days dropdown as you should be. There is no value for days option (third option).
- Firstly we need to set the value of third option
- Check if its selected select
onchangefunction
We can the check on change if the value of selected option is no-of-days then we can append another dropdown OR else we will not show anything.
Run snippet below to see it working.
function func() { var dropdown = document.getElementById("name"); var selection = dropdown.value; var TextBox = document.getElementById("days"); var appendNewSelect = document.getElementById("container") TextBox.value = selection; //If days (option) is selected if (selection == 'no-of-days') { var values = ["1", "2", "3", "4"]; //Create Select var select = document.createElement("select"); select.name = "date"; select.id = "date" //Select option for (const val of values) { var option = document.createElement("option"); option.value = val; option.text = val.charAt(0).toUpperCase() + val.slice(1); select.appendChild(option); } //Label var label = document.createElement("label"); label.innerHTML = "Choose your date: " label.htmlFor = "date"; appendNewSelect.appendChild(label).appendChild(select); } else { appendNewSelect.innerHTML = '' } }
<html> <body> <label> Assets:</label> <select id="name" onchange="func()"> <option value=""></option> <option value="year">Calendar</option> <option value="the current month">Month</option> <option value="no-of-days">Days</option> </select><br><br> <label>Days:</label> <input type="text" id="days"> <br> <br> <div id="container"> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.