0
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

how to keep the select options open by deafult

Prashant Agre
  • 11
  • You can't with the standard control. You will need to use a third party select element replacement library for that, such as Chosen or Select2 – Rory McCrossan Sep 30 '20 at 07:52
  • May I ask you why you use a ` – secan Sep 30 '20 at 07:56
  • I'm unsure what you want to achieve exactly. However, have you considered using the [multiple attribute](https://stackoverflow.com/questions/8430597/how-to-keep-select-dropdown-open-to-test-styles-on-option-in-firebug)? – Andrew Hardiman Sep 30 '20 at 07:59
  • Does this answer your question? [Open Select using Javascript/jQuery?](https://stackoverflow.com/questions/2048213/open-select-using-javascript-jquery) – freedomn-m Sep 30 '20 at 08:10

3 Answers3

1

As I mentioned in my comment, displaying a <select> element that stays open does not make a lot of sense, as the <select> element aim is specifically to create a drop-down list.

Anyway, if you want all your options to be visible, you can use the size attribute and set it equal to the number of options available.

<select name="cars" id="cars" size="4">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>

Or, if you do not want to see the scrollbar:

<select name="cars" id="cars" size="4" style="overflow-y: hidden;">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
secan
  • 2,622
  • 1
  • 7
  • 24
0

You cant on the native select but keeping it open it defeats the purpose of using a select maybe using a radio input serve you better.

see mozilla doc for an example https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Christos Christou
  • 192
  • 4
-1

Do it to multiple!

Example:

<select name="cars" id="cars" multiple="multiple">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
Blaze
  • 84
  • 5