So the basic idea with select tags is to have a single select element, and then a nested option element for each option in the selection element. By default the inner text of the option element will be the value property of the select element, however it is advisable to have a separate display value, and actual value.
So when I set an on change event listener to the selection element the value of the selection element will change each time the user selects one of the options in the select element drop down menu. In addition I can define what I want to happen in the body of that event listener when it comes to what needs to happen each time the user changes something with the select tag menu.
So for starters here is a fairly simple copy and past select tag example. I have a span element the text of which will be set to whatever the value of the select tag is. In then have three option elements for the select tag each of which have some inner text that will be the value for the select tag if the option is the one selected. I then have a simple set disp method that when called will just set the inner text of the disp element to the value of the select element. I then make my set disp method the handler for the on change event for the select element, and also call it once for starters right away to make sure that it is set to the current value of the select element right away before any other option is selected.
So by default the value of the select tag will be the inner text of the current option element that is selected. However the value can be set to something else by way of the value attribute of the option element. So then the value of an option can be used to set some other value from the inner text of the option. So then the inner text can be used for a display name, and the value can be used as some kind of id for the selection option.
On top of the value attribute of the option elements there is also the selected attribute that is worth mentioning also. This attribute can be used as a way to set a default option in the collection of options other than the first child element.
So once again here is the same example as before, just with some additional changes by way of adding value attributes, and having an option other than the first one serve as a starting option for the select tag.
This is helpful because in many situations I might want to actually value of the select element to be some kind of simplified key value for an object. However this key value might not be a good description of what the option is in plain English, so it is good to have two sets of info per option tag.
The disabled property of an select element can be used to disable a selection element, or any option in a selection tag if it is not currently applicable. For example say you are making some kind of simple game demo that contains a display object that can be controlled by an AI script, or user input. A select tag can be used to switch between the two, and depending on the current value of the first select tag another select tag can be enabled or disabled.
So then the disable attribute will come into pay when working out some kind of user interface that is a little involved. Where there are whole menus that will end up being disabled depending on other settings, or the state of the application.
So select tags in combination with option tags are the standard html way of creating an interface where a user can select from two or more options. It is often used with additional events such as the on change event to define what happens when the state of the select tag changes.
In this post I did not cover every little thing about select tags though, there is much more to cover when it comes to making a select tag that is to sever as a way to interact with a back end system.