javascript - How make to make dropdown without html select

Question

I used the following html to make a dropdown:

<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>

So, as you can see here in the html and the running snippet, I tried to add paragraph tag inside the select tag, tried styling the option and nothing works.

The objective is to achieve something like the photo, where I select an item,the item would go to the input field.

Hope you can help.

Answer 1

I suggest you use optgroup to set your desired element/header. <p> is not a valid element under <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>