HTML multi level Dropdown box

Question

I want to create a multi level drop down box. when I click on setauthor it should display a submenu with some names

My first level code :

<select>
     <option value="Like">Like</option>
     <option value="Star">Star</option>
     <option value="Set Author">Set Author</option>
</select>

Kindly help me.

Answer 1

Try this

<select>
 <optgroup label="First Group">
      <option value="Like">Like</option>
      <option value="Star">Star</option>
 </optgroup>
 <optgroup label="Second Group">     
      <option value="Set Author">Set Author</option>
 </optgroup>
</select>

Answer 2

TO achieve expected result, use below option of using eventListener on dropdown

HTML:

<select class="first">
     <option value="Like">Like</option>
     <option value="Star">Star</option>
     <option value="Set Author">Set Author</option>
</select>
<select id="set">
     <option value="John">John</option>
     <option value="Doe">Doe</option>
     <option value="Mark">Mark</option>
</select>
<select id="star">
     <option value="one">1</option>
     <option value="two">2</option>
     <option value="three">3</option>
     <option value="four">4</option>
     <option value="five">5</option>
</select>
<select id="like">
     <option value="like">like</option>
     <option value="good">good</option>
     <option value="bad">bad</option>
</select>

CSS:

#set, #star{
  display:none
}

JS:

var elem = document.querySelectorAll('.first')

for(var i =0; i < elem.length; i++){
  elem[i].addEventListener('change',function(e){
    if(e.target.value == 'Set Author'){
       document.getElementById('set').style.display = 'inline-block'
       document.getElementById('star').style.display = 'none'
       document.getElementById('like').style.display = 'none'
    }
    if(e.target.value == 'Star'){
       document.getElementById('star').style.display = 'inline-block'
       document.getElementById('set').style.display = 'none'
       document.getElementById('like').style.display = 'none'
    }
    if(e.target.value == 'Like'){
       document.getElementById('like').style.display = 'inline-block'
       document.getElementById('star').style.display = 'none'
       document.getElementById('set').style.display = 'none'
    }
  })
}

codepen- https://codepen.io/nagasai/pen/rJqVje

Answer 3

You can use lists as shown below. Then use bootstrap to style the menu.

    <select>
         <ul>
         <li>Like</li>
         <li>Star</li>
           <ul>
              <li>Set Author</li>
           </ul>
         </ul>
    </select>