Create custom Select_javascript skills based on button dropdown inside bootstrap

Recently work very busy, in the revision of a system. Project backstage is MVC1.0 developed, but the front part has changed several versions, just before the designer is very powerful, and do design and do front-end development. It's stylish and cutting-edge, using the Bootstrap toolkit that's always been popular, and there's a lot of defining it as the Web front-end CSS framework. To be honest, it was only known that it was produced by Twitter, and the interface was pretty good. But did not use in the actual project, before the company new colleague will this, prepares to use in the company official website project, because I will not, just leader to this also not cold, therefore did not use. She said that together with less to do projects, can improve the efficiency of development, just can make the system more beautiful and beautiful, just the adaptive design support is better.

The project requirement is to replace the HTML native Select label with the Drop-down box effect shown in the following illustration. I generally see this requirement, to change native HTML tags, do not like to get. Although it is also known through the UI and Li tags, plus JavaScript code to achieve the same function as SELECT, but did not try to write before, the bug and browser compatibility problems, and PM communication, is not to change this select, using the original SELECT, PM said it is to reduce user interference, so that users do not care too much about this option. I think this is the reason, the first long do not want to select so exaggerated, followed by the drop-down arrow a bit small, users will not be too deliberately to click. In fact, clicking that text will also open the Drop-down list below.

Image (HTML native select tag) image (final effect diagram)

(HTML native Select label)

Select Original function is to click on the right side of the Drop-down arrow can open the Drop-down list, to the user to select. The user chooses an option, and the value in the text box becomes the corresponding option, and can get the value of option. Another important feature is that option has a selected attribute. If an option has selected= "selected", the dropdown box defaults to the current option.

Bootstrap provides button dropdown to make a nice menu, not just a select feature. When I searched for it, I thought Bootstrap could provide a select component similar to the button dropdown style. But I am delusional, without this component, the component must be implemented. In fact, with the UL and Li write select label experience, write this is not very difficult.

<div class= "dropdown" style= "margin-top:30px;" >
<a style= "font-size:14px class=" btn dropdown-toggle "type=" button "id=" dropdownMenu1 "data-toggle=" Dropdown ">
Text 1
<span class=" caret "></span>
</a>
<ul class=" Dropdown-menu "role=" menu "aria-labelledby=" dropdownMenu1 ">
<li role=" presentation "Value=><a role= "MenuItem" tabindex= "1" href= "#" >text 1</a></li> <li role= "presentation" ><a role=
" MenuItem "tabindex=" 2 "href=" # ">text 2</a></li> <li role=" presentation "><a role="
MenuItem "tabindex=" 3 "href=" # ">text 3</a></li>
</ul>
</div>

This is the basic code for button dropdown. Because it will apply CSS style, we have to change the style behind bootstrap.min.css, so we need to put some style on this page alone.

<! DOCTYPE html>