模拟select取值ul li

最新推荐文章于 2022-10-28 15:46:18 发布

恒妹

最新推荐文章于 2022-10-28 15:46:18 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery div+css

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

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

17 篇文章

订阅专栏

jQuery

13 篇文章

订阅专栏

本文介绍了一段使用jQuery实现的代理选择器功能，通过动态生成选项列表并将其与现有元素关联，实现了用户友好的UI交互。代码示例展示了如何遍历对象数组，构建选项列表，并应用CSS样式进行布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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');
         })
})
})();