模拟select取值ul li

最新推荐文章于 2024-07-24 20:18:42 发布

恒妹

最新推荐文章于 2024-07-24 20:18:42 发布

阅读量1k

点赞数

分类专栏： jQuery div+css

本文链接：https://blog.csdn.net/peidandan/article/details/8496212

版权

div+css 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

jQuery

13 篇文章 0 订阅

订阅专栏

jQuery(function($){
var selDOM = function(obj){
      for(var i=0;i<obj.length;i++){
        var items = jQuery(obj[i]);
        for(var k=0;k<items.length;k++){
        (function(){
          var arrDOM = ["<div class='category_select'><ul style='display:none;'>"], item = jQuery(items[k]);
          item.find("option").each(function(){
            arrDOM.push("<li ref='"+jQuery(this).val()+"'>"+jQuery(this).text()+"</li>");
          });
          arrDOM.push("</ul></div>");
          var ul = jQuery(arrDOM.join(""));
          ul.find("li:eq(1)").addClass("");
          item.val(ul.find("li:first").css('display','block'));
          item.after(ul);
        })();
      }
    }
}
jQuery(document).ready(function() {
    selDOM(["#edit-custom-search-types"]);
    jQuery(".category_select").find("li").each(function(i){
      if(i == 0) {
        jQuery(".category_select").prepend('<h4>'+jQuery(this).text()+'</h4>');
      }
      jQuery(this).css('display','block').html(jQuery(this).html().replace("-",""));
    });
    jQuery('.category_select h4').click(function(){
      jQuery('.category_select').find("ul").css('display','block');
    })
    jQuery('.category_select ul li').click(function(){
      jQuery('.category_select ul').css('display','none');
      jQuery('.category_select h4').text(jQuery(this).text());
      jQuery('#edit-custom-search-types').val(jQuery(this).attr("ref"))
      return false;
    })
    jQuery('.category_select ul li').hover(function(){
           jQuery(this).addClass('hover');
         },function(){
           jQuery(this).removeClass('hover');
         })
})
})();