HTML多级下拉框

Question

我想创建一个多级下拉框。当我点击setauthor时，它应该显示一个带有一些名字的子菜单

我的第一级代码：

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

请帮帮我。

Answer 1

试试这个

<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

您可以使用如下所示的列表。然后使用bootstrap来设置菜单样式。

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

Answer 3

要获得预期结果，请在下拉列表中使用以下选项使用eventListener

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