javascript - 如何在没有 html select 的情况下制作下拉菜单

Question

我使用以下 html 来制作下拉列表:

<div class="container">
<select id="search-pax" name="pax" class="ls-select ">
  <p>Start the selection</p>
  <option value="1">1 gas <span>1700</span></option>
  <option value="2">2 gaste</option>                    
  <option value="3">3 gaste</option>                    
  <option value="4">4 gaste</option>                    
  <option value="5">5 gaste</option>                    
  <option value="6">6 gaste</option>                    
  <option value="7">7 gaste</option>                    
  <option value="8">8 gaste</option>                    
  <option value="9">9 gaste</option>

  <option value="10">10 gaste</option>              
  <option value="11">11 gaste</option>              
  <option value="12">12 gaste</option>              
  <option value="13">13 gaste</option>              
  <option value="14">14 gaste</option>              
  <option value="15">15 gaste</option>              
  <option value="16">16 gaste</option>              
  <option value="17">17 gaste</option>              
  <option value="18">18 gaste</option>              
  <option value="19">19 gaste</option>              
  <option value="20">20 gaste</option>              
  </select> 
</div>

所以，正如你所看到的 here in the html and the running snippet ，我尝试在选择标签内添加段落标签，尝试设计该选项的样式，但没有任何效果。

目标是实现类似照片的效果，我选择一个项目，该项目将转到输入字段。

希望能帮到你。

Answer 1

我建议您使用 optgroup 来设置您想要的元素/标题。 <p>不是 <select> 下的有效元素.

<div class="container">
<select id="search-pax" name="pax" class="ls-select ">
<optgroup label="Start the selection">
  <option value="1">1 gas <span>1700</span></option>
  <option value="2">2 gaste</option>                    
  <option value="3">3 gaste</option>                    
  <option value="4">4 gaste</option>                    
  <option value="5">5 gaste</option>                    
  <option value="6">6 gaste</option>                    
  <option value="7">7 gaste</option>                    
  <option value="8">8 gaste</option>                    
  <option value="9">9 gaste</option>

  <option value="10">10 gaste</option>              
  <option value="11">11 gaste</option>              
  <option value="12">12 gaste</option>              
  <option value="13">13 gaste</option>              
  <option value="14">14 gaste</option>              
  <option value="15">15 gaste</option>              
  <option value="16">16 gaste</option>              
  <option value="17">17 gaste</option>              
  <option value="18">18 gaste</option>              
  <option value="19">19 gaste</option>              
  <option value="20">20 gaste</option> 
</optgroup>            
  </select> 
</div>