Menu
How can I implement a select-style drop down menu in HTML with an option that is a text input?
The idea being that someone can either select from a list of predefined options, or input their own option.
678
To get the value of a select or dropdown in HTML using pure JavaScript, first we get the select tag, in this case by id, and then we get the selected value through the selectedIndex property. The value "en" will be printed on the console (Ctrl + Shift + J to open the console).
To select multiple items, the user has to hold down the shift or ctrl key, then select with the mouse.
The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
You can use input text with "list" attribute, which refers to the datalist of values.
<input type="text" name="city" list="cityname"> <datalist id="cityname"> <option value="Boston"> <option value="Cambridge"> </datalist>This creates a free text input field that also has a drop-down to select predefined choices. Attribution for example and more information: https://www.w3.org/wiki/HTML/Elements/datalist
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
