jquery实现select的美化

最新推荐文章于 2020-09-08 10:41:27 发布

yxgxy1717

最新推荐文章于 2020-09-08 10:41:27 发布

阅读量2.2k

点赞数

文章标签： jquery function div html url

本文链接：https://blog.csdn.net/yxgxy1717/article/details/1832931

版权

<html>
   <head>
       <script src="jquery-1.2.js"></script>
       <script>
           $(document).ready(
               function () {
                   $("#select").click (
                       function () {
                           var original =this;
                           $(original).blur();
                           $(original).css("visibility", "hidden");
                           var value = $(this).attr("value");
                           var topOffset = 0;
                           var alternate = document.createElement("div");
                           $(document.body).append(alternate);
                           {
                               var alternate_select = document.createElement("div");
                               $(alternate).append(alternate_select);
                               $(alternate_select).css("position", "absolute");
                               $(alternate_select).css("width", original.offsetWidth + "px");
                               $(alternate_select).css("height", original.offsetHeight + "px");
                               $(alternate_select).css("top", "0px");
                               $(alternate_select).css("left", "0px");
                               $(alternate_select).css("cursor", "pointer");
                               $(alternate_select).text(
                                   $($(original).children("option").filter(
                                           function (index) {
                                               return $(original).attr("value") === value;
                                           }
                                       )[0]
                                   ).text()
                               );
                               $(alternate_select).click(
                                   function () {
                                       $(original).css("visibility", "inherit");
                                       document.body.removeChild(alternate);
                                   }
                               );
                               $(alternate_select).hover(
                                   function (event) {
                                       $(this).css("background-color", "blue");
                                       $(this).css("color", "white");
                                   },
                                   function (event) {
                                       $(this).css("background-color", "inherit");
                                       $(this).css("color", "inherit");
                                   }
                               );
                           }
                           topOffset += alternate_select.offsetHeight;
                           {
                               $(original).children("option").each(
                                   function (index, element) {
                                       var alternate_option = document.createElement("div");
                                       $(alternate).append(alternate_option);
                                       $(alternate_option).css("position", "absolute");
                                       $(alternate_option).css("width", element.offsetWidth + "px");
                                       $(alternate_option).css("height", element.offsetHeight + "px");
                                       $(alternate_option).css("top", topOffset + "px");
                                       $(alternate_option).css("left", "0px");
                                       $(alternate_option).css("cursor", "pointer");
                                       $(alternate_option).text($(element).text());
                                       var option_value = $(element).attr("value");
                                       if (value === option_value) {
                                           $(alternate_option).css("font-weight", "bold");
                                       }
                                       $(alternate_option).click(
                                           function () {
                                               $(original).attr("value", option_value);
                                               $(original).css("visibility", "inherit");
                                               document.body.removeChild(alternate);
                                           }
                                       );
                                       $(alternate_option).hover(
                                           function () {
                                               $(this).css("background-color", "blue");
                                               $(this).css("color", "white");
                                           },
                                           function () {
                                               $(this).css("background-color", "inherit");
                                               $(this).css("color", "inherit");
                                           }
                                       );
                                       topOffset += alternate_option.offsetHeight;
                                   }
                               );
                           }
                           $(alternate).css("position", "absolute");
                           $(alternate).css("top", original.offsetTop + "px");
                           $(alternate).css("left", original.offsetLeft + "px");
                           $(alternate).css("width", alternate_select.offsetWidth + "px");
                           $(alternate).css("height", topOffset + "px");
                           $(alternate).css("background-image", "url(http://s.goumin.com/imgs/logo.gif)");
                       }
                   );
               }
           );
       </script>
   </head>
   <body>
       <select id="select">
           <option value="1">option 1</option>
           <option value="2">option 2</option>
           <option value="3">option 3</option>
           <option value="4">option 4</option>
       </select>
   </body>
</html>