CODEWITHSUNDEEP
javascripthtml
DonWagner
DonWagner

Reputation: 71

How to get a dropbox to show options in another dropbox

I was thinking if it's possible to let a select dropdown box deside which options there will be in another select dropbox.

For example, i would like to have a checkbox, if that's checked a dropbox will appear. And when choosing an option i that dropbox, a new dropbox would appear.

Then if i have choosed days, in the first dropbox, then i would be able to choose between all days of the week in the new dropbox. Then if i choose weeks, in the first dropbox, then i would be able to choose between all weeks numbers in the new dropbox. And so on..

I have tried to google it, but without any luck. The first part with the checkbox and getting the frist dropbox appears is easy enough, but the last part, not so much for me.

Sorry if my english is bad and my question is a little hard to understand.

Edit:

<script>
function showSelect() {
  var checkBox = document.getElementById("checked");
  var select = document.getElementById("select");

  if (checkBox.checked == true){
    select.style.display = "block";
  } else {
    select.style.display = "none";
  }
}
</script>
Rot: <input type="checkbox" id="checked" onclick="showSelect()">

<select id="select" style="display:none">
  <option disabled="disabled" selected="">-- choose --</option>
  <option value="1">Days</option>
  <option value="2">Week</option>
</select>

Upvotes: 0

Views: 163

Answers (1)

justDan
justDan

Reputation: 2333

You can do that by listening for a change event on the first select drop down list. Once you get the selected value, you can use it with another if statement to display the next select list. Try this:

function showSelect() {
  var checkBox = document.getElementById("checked");
  var select = document.getElementById("select");

  if (checkBox.checked == true){
    select.style.display = "block";
  } else {
    select.style.display = "none";
  }
}

var daysWeeks = document.getElementById('select'),
    days      = document.getElementById('select-days'),
    weeks     = document.getElementById('select-weeks');

daysWeeks.addEventListener('change', function() {
   var newSelect = daysWeeks.options[daysWeeks.selectedIndex].value;

    days.style.display = 'none';
    weeks.style.display = 'none';
  
   if (newSelect === '1') {
     days.style.display = 'block';
   } else if (newSelect === '2') {
     weeks.style.display = 'block';
   }
});
Rot: <input type="checkbox" id="checked" onclick="showSelect()">

<select id="select" style="display:none">
  <option disabled="disabled" selected="">-- choose --</option>
  <option value="1">Days</option>
  <option value="2">Week</option>
</select>

<select id="select-days" style="display:none">
  <option disabled="disabled" selected="">-- choose --</option>
  <option value="1">Day1</option>
  <option value="2">Day2</option>
</select>

<select id="select-weeks" style="display:none">
  <option disabled="disabled" selected="">-- choose --</option>
  <option value="1">Week1</option>
  <option value="2">Week2</option>
</select>

Upvotes: 1

Related Questions