jquey写的select下拉插件 解决了自带option宽度不能改变的问题

最新推荐文章于 2023-10-10 16:16:34 发布
最新推荐文章于 2023-10-10 16:16:34 发布
阅读量927 收藏
点赞数
分类专栏： jquery javascript 文章标签： jquery css html ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhang840327220/article/details/84735250
版权
1,html代码 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/selectAuto.js"></script>
    <link type="text/css" href="css/selectAuto.css" rel="stylesheet"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#selectId").selectAuto({
                title:"所有分类",
                width:200,
                height:200,
                data: [
                    {key: "0", value: "所有分类"},
                    {key: "1", value: "测试1"},
                    {key: "2", value: "测试2"},
                    {key: "3", value: "测试3"},
                    {key: "4", value: "测试4"}
                ],
                callback:function(){
                },
                onSelect:function(key,val){
                    alert(key);
                }
            });
        });
    </script>
</head>
<body>
        <div  id="selectId"></div>
</body>
</html>

2，js代码 

(function ($) {
    $.fn.selectAuto = function(_4b,_4c){
        if(typeof _4b=="string"){
            var _4d=$.fn.selectAuto.methods[_4b];
            if(_4d){
                return _4d(this,_4c);
            }
        }
        _4b=_4b||{};
        var defaults = {
            title:"",//下拉提示
            width: 200,
            height: 150,
            url:null,    //远程接口加载数据
            type:"get", //接口调用方式 默认是get方式
            dataType:"json",//数据返回格式 默认为json格式
            param:null,
            data:null,    //加载本地数据
            callback:null, //自定义回调方法
            locationStyle:{left: "3px", top:"26px"},//默认位置
            onSelect:function(){}  //下拉选中事件
        }
        var options = $.extend(defaults, _4b);
        this.each(function(){
            var thisSelect=$(this);
            var _ids=thisSelect[0].id;
            thisSelect[0].style.position="relative";
            var html='<span id="'+_ids+'_select_title_span"  class="select_title_span" style="width:'+options.width+'px;"> ' +
                        ' <span id="'+_ids+'_select_title" class="select_title" style="width:'+options.width+'px;">'+options.title+'</span>'+
                        ' <b class="select_icon"></b>'+
                      '</span>'+
                      '<div id="'+_ids+'_option_box_div" class="option_box_div" style="display:none;width:'+(options.width+10)+'px;">'+
                       '  <span id="'+_ids+'_data_li" style="width:'+(options.width+20)+'px;height:'+options.height+'px;">'+
                        ' </span></div>';
            thisSelect.empty().append(html);
            $("#"+_ids+"_option_box_div").css(options.locationStyle);
            if(options.data!=null){
                $.fn.selectAuto.methods. _5d(_ids,options.data);
            }else{
                if(options.url){
                    $.ajax({type:options.type,url:options.url,data:options.param,dataType:options.dataType,success:function(_d){
                        $.fn.selectAuto.methods. _5d(_ids,_d);
                    },error:function(){
                    }});
                }
            }
            if(typeof options.callback=="function"){
                options.callback();
            }
            thisSelect.find("span#"+_ids+"_select_title_span").bind("click", function () {
                if($(this).next().is(":hidden")){
                    $(this).next().show();
                    $("#"+_ids+"_option_box_div span p").each(function(i,item){
                        if($("#"+_ids+"_select_title_span>span").text() == $(this).attr('title')){
                            $(this).addClass("option_selected");
                        }else{
                            $(this).removeClass("option_selected");
                        }
                    })
                }else{
                    $(this).next().hide();
                }
            });
            thisSelect.find("div#"+_ids+"_option_box_div>span>p").bind("click", function () {
                var $title=$("#"+_ids+"_select_title");
                $title.html($(this).html());
                $title.attr("valueId",$(this).attr("key"));
                $("#"+_ids+"_option_box_div").hide();
                if(typeof options.onSelect=="function"){
                    options.onSelect($(this).attr("key"),$(this).html());
                }
            });
        });
    };
    $.fn.selectAuto.methods={
        setValue:function(_this,data){
            var $title=$("#"+_this[0].id+"_select_title");
            var key,value;
            if(typeof data=="string"){
                key=data;value=data;
            }else if(typeof data=="object"){
                key=data.key;value=data.value;
            }
            $title.html(value);
            $title.attr("valueId",key);
            $(".option_box_div ul li p").each(function(i,item){
                if(value == $(this).attr('title')){
                    $(this).addClass("option_selected");
                }else{
                    $(this).removeClass("option_selected");
                }
            });
        },getValue:function(_this){//获取选中的值
            return  $("#"+_this[0].id+"_select_title").attr("valueId");
        },getText:function(_this){//获取选中的显示值
            return  $("#"+_this[0].id+"_select_title").text();
        },loadData:function(_this,data){
            _5d(_this[0].id,data);
        },clearData:function(_this){
            $("#"+_this[0].id+"_data_li").empty();
        },_5d:function(_i,_d){
            var html="";
            $.each(_d, function(key, d){
                html+=' <p key="'+ d.key+'" title="'+ d.value+'">'+ d. value+'</p>';
            });
            $("#"+_i+"_data_li").empty().append(html);
        }
    }
})(jQuery);

3，css代码 

.select_title_span{
    display:inline-block; height:16px; padding:3px 10px 4px 10px; border:1px solid #cccccc;
    line-height:16px; outline:0 none;  background-color:#ffffff; cursor:pointer;
    margin-right:5px;position:absolute;
}
.select_icon{
    display:inline-block; width:14px;height:8px; overflow:hidden;
    background:url(../img/bg_dropd.png) no-repeat 0 0;
    float:right;
    margin-top: 4px;;
}
.option_selected{background-color:#008573; color:#ffffff;}
.option_box_div{ position:absolute;border: 1px solid #aaaaaa;background-color: #ffffff;}
.option_box_div span{float:left;*position:relative;overflow-x: hidden;overflow-y:scroll; }
.option_box_div span p{cursor:pointer;}

4，附件为所需素材和效果图
zhang840327220
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
修改option的宽高无效，用div+ul做select下拉菜单
weixin_30628801的博客
09-23 619
有时候设计稿的option选项的宽高都不是默认尺寸，想要修改宽高，用padding或者margin都没有用，所以就用div+ul+jq实现。 html <div id="city"> <p class="title">查找新世界城市活动信息</p> <p>每个城市的有不同的活动信息...
JQuery Mobile 手机显示页面偏小
Rex.Yin的专栏
10-10 8277
今天第一次用JQuery Mobile做了个3个手机小页面，一个登陆页面、一个列表页面和一个表单页面，页面中的组件呈现一切正常。 但出现了一个奇怪的问题，登陆页面大小正常，到了列表页面和表单页面就显得非常小，对比各种CSS样式，完全没问题。 花了1个小时中发现，原来在页面head中少了一句话 这句话其实在官方指导文章上貌似也看过是很重要的，奈何刚使用，还是给遗漏了
jquery mobile input 和select 改变宽度
zhonghaima的博客
09-02 1586
jquery mobile  input 和select 改变宽度 .ui-field-contain  .ui-input-text{       width : 300px !important;   } .ui-field-contain  .ui-select{       width : 300px !important;   }
el-select修改宽度没效果
滕青山博客
01-18 2244
第一种方法 不要用el-form包裹住 第二种方法 拉长el-select的输入框 给el-select加上.my-select样式 <style scoped lang="scss"> ::v-deep .el-input__inner { width: 100%!important; } ::v-deep .el-input { width: 100%!important; } ::v-deep .my-select{ display: block!important;;
jQuery 解决 IE 6/7/8 BUG：下拉框select设宽度时option超出显示不全
weixin_30565327的博客
05-22 168
该代码原文来自：惊寒唱晚 个人做了一些自定义的修改 <!--[if lt IE 9]><script type="text/javascript"> jQuery(function($){ var el; $("select").each(function() { el = $(this); el.data("origWidth", ...
jQuery动态产生select option下拉列表
12-11
但其中没有实现动态产生select option下拉列表。 在jQuery环境之下使用创建jQuery对象来实现动态产生，那是很方便的事情。  在数据库中准备一些数据： 存储过程： 开发ASP.NET MVC，实现程序，少不了model: 现...
固定宽度下拉列表select中option内容显示不全问题解决方法
03-17
总的来说，处理固定宽度下拉列表`<select>`中`<option>`内容显示不全的问题需要结合HTML、CSS和JavaScript的知识。开发者需要了解浏览器对`<select>`元素的限制，然后根据需求选择最合适的解决方案，无论是使用现有...
jQuery Select下拉菜单插件.zip
最新发布
11-02
《jQuery Select下拉菜单插件深度解析》 在网页开发中，下拉菜单是一个不可或缺的交互元素，它能够有效地组织和展示大量选项，提供简洁的用户界面。jQuery作为一个强大的JavaScript库，提供了丰富的插件来增强原生...
jquery实现select带模糊搜索下拉选择框
11-10
然而，原生的 `select` 元素并不支持模糊搜索功能，所以我们需要借助 `jQuery` 和 CSS 来增强其功能。 1. **引入资源**： 在项目中，你需要引入 `jQuery` 库以及自定义的 CSS 和 JavaScript 文件。假设我们有以下...
select下拉框插件jquery.editable-select详解
10-20
`jQuery.editable-select` 是一个方便的 jQuery 插件，用于增强传统的 HTML `select` 元素，使其具有更友好的交互性和自定义功能。它允许用户不仅可以从下拉选项中选择，还可以直接在输入框中手动输入。这篇文章将...
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
10-27
jQuery解决IE 6/7/8 BUG：下拉框select设宽度时option超出显示不全，经过修改效果还不错，遇到类似情况的朋友可以参考下哈
select元素中设置padding效果
weixin_30662109的博客
08-04 576
更新2016-9-17：这个bug是在mac os上的发生，在window系统中不存在这个问题！ 给select元素增加：padding-left：20px;但是未生效，如下图所示： 在select上如何使设置padding生效？ 方法一： 设置属性appearance： 给select增加属性： appearance: none; -webkit-appearance: no...
IE下Select下拉框宽度无法自适应Bug
itguaicai的专栏
01-10 3040
问题描述： IE6到IE8，Select下拉框宽度无法自适应宽度，当option中的宽度超多select的宽度时，会被截取，如图： 【注】该问题在IE9+、Chrome、FireFox等浏览器中不存在。 解决思路： 当鼠标移到select元素时将其宽度置为auto； 鼠标移开时恢复为原定宽度。 代码（基于jQuery）： $(functio
讲述下拉框自己的故事——解决html的select(下拉框)宽度问题
【头号恶魔】
09-04 1644
我们经常要使用select ，但select的大小会随着内容的大小而变化。很烦人啊。 网上有人说用层来替代，这个方法是可行的，就是觉得有点麻烦。 本人喜欢投机取巧。。呵呵 所以想了个懒办法--用脚本控制 当select被点击（onclick或者onchange）的时候调用脚本函数改变这个select的width值 当select失去焦点（onblur）的时候再一次调用脚本恢复这个sele...
改变select样式
weixin_71104826的博客
10-10 2192
自定义select
Select2 使用总结
TSORA-C的博客
05-22 379
Select2使用总结介绍定位功能前提使用版本功能初始化修改宽度多选占位符自定义选择样式 介绍 Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. 定位 下拉框 多选框 功能 单选 多...
select下拉框宽度设置问题（自适应宽度，水平滚动条）
热门推荐
chao1513392的专栏
12-13 7万+
概述： 在实际应用中，很多时候都会用到select，但是由于下拉框的内容宽度不可控，就导致select宽度往往不是我们想要的。 需求：              1、给select设置最小值，在内容小于最小值时，要控制select的宽度是最小值，而不能让它太短，影响美观程度。              2、对应的也需要设置最大值。              3、当内容过长时，给出提示。
jQuery select下拉菜单
08-24
jQuery select下拉菜单的相关操作方法如下： 1. 删除选中项：使用`$('#XXX option:selected').remove();`代码可以删除select下拉菜单中被选中的选项。 2. 删除第一项：使用`$('#XXX option:first').remove();`代码可以删除select下拉菜单中的第一项选项。 3. 循环遍历option：可以使用`$('#XXX option').each(function(){})`代码来循环遍历select下拉菜单中的每一个选项。 4. 删除与指定值相等的option：使用`$('#XXX option[value=5]').remove();`代码可以删除select下拉菜单中值为5的选项。 5. 根据option的值选中option：使用`$("#XXX option:contains('A')").prop("selected", true);`代码可以根据option的值选中相应的选项，这里以值为A的选项为例。 以上是一些常用的jQuery select下拉菜单的操作方法。<span class="em">1</span> #### 引用[.reference_title] - *1* [使用jQuery对select下拉菜单进行选择操作](https://blog.csdn.net/Hard042/article/details/83271324)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值