Select element of oil and salt


Recently, drop-down lists have been used in projects. Because browsers have different parsing of drop-down lists, and projects require that their own browser’s own select effect be used. This makes me completely abandon the use of other people’s drop-down list control (such as: bootstrap dropdown).
Here is a summary of my select.

  1. There is no site text in select, that is, there is no placeholder attribute.
    Without this attribute, the biggest problem is that the display value of the select box must be one of its options, which means that select cannot achieve the placeholder effect of input. Now some dropdown controls on the Internet realize this effect. They all simulate select with div, UI, Li and JS.

  2. The option item of select does not enter.
    Sometimes we want to trigger a JS method when the user clicks option. Sorry, this can’t be implemented, because the events of option are controlled by select itself. Also, adding elements inside or outside an option is not easy to use, such as the following code. At that time, the idea was to set one inside or outside the option, and then get the event of the external element, so that the event of the option being clicked could be simulated, but unfortunately it didn’t succeed. Adding an element outside will make the select unable to recognize the option, and this item will be excluded. So most monitoring events are monitored on select, such as onchange.


Adding styles in option is also invalid. Select itself has given styles and does not accept other styles. So changing the style can only be done on the select tab.
Attach the events, properties and methods of select