网站

jquery写的div代替select multiple 美化样式

分类 :jquery     2020-06-02 人气:0 0条评论

multiple是指非下拉的select选择框,最近写新网站要用到分类选择的这块,原生的select太丑,网上提供的基本上都是下拉的,修改起来更复杂,最后决定自己写一个。

这是测试完之后的功能,但我标注的很细,想用的直接套用就成。

全部代码

<style>
                               .selcolor { background-color: #666; color:#fff;}
                               .opt { line-height: 30px; padding-left: 20px;}
                               </style>

<input class="cate" name="member" value="" type="hidden"></input>
                               <div class="opt" value="1">高级会员</div>
                               <div class="opt" value="2">初级会员</div>

                               <script>
                                   $('.opt').click(function(){
                                       //给当前点击的添加class为selcolor的
                                        $(this).addClass('selcolor');
                                        //获取当前class所在的value值
                                        var emdup = $(this).attr('value');
                                        //将值写入到input里面
                                        $('.cate').attr('value',emdup);

                                        //为防止点击后多个里面出现selcolor
                                        //将当前的值与input的值对比,将其余的删除后重新赋值
                                        if( $(this).attr('value') == $('.cate').attr('value') ){
                                            $('.opt').removeClass('selcolor');
                                            $(this).addClass('selcolor');
                                        }
                                    });
                               </script>

以上代码说明

  1. Input一定要有一个,里面的name是我们提交时候用的。
  2. 只要将div的opt定义成一样就可以,点击和清除都是用这个名称。
  3. 最重要的是,要引入jquery文件

上面代码运行后

jquery写的div代替select multiple 美化样式

评论

大侠名号:   验证暗号: 点击我更换图片

继续阅读