​长兴网站推广【长兴官网推广哪个效果好】长兴百度竞价推广托管、长兴百度优化推广外包、长兴全网霸屏推广多少钱、长兴网络推广一年大概多少费

新建html文档。

书写hmtl代码。

<h3>多选：</h3>

<div id="test"></div>

<span>结果：</span>

<input type="text" id="testValue"/>

<h3>单选：</h3>

<div id="test2"></div>

<span>结果：</span>

<input type="text" id="testValue2"/>

<h3>已选:</h3>

<div id="test3"></div>

<span>结果：</span>

<input type="text" id="testValue3"/>

<h3>关于选择类型（checkStyle）:</h3>

<div style="height: 25px"><b style="margin-right: 10px;"><span>yx(圆心):</span></b><span><i class="iconfont icon-xuanzhong"></i></span><span><i class="iconfont icon-weixuanzhong1"></i></span></div>

<div style="height: 25px"><b style="margin-right: 10px;"><span>yg(圆钩):</span></b><span><i class="iconfont icon-xuanzhong1"></i></span><span><i class="iconfont icon-weixuanzhong1"></i></span></div>

<div style="height: 25px"><b style="margin-right: 10px;"><span>fx(方心):</span></b><span><i class="iconfont icon-CombinedShapeCopy"></i></span><span><i class="iconfont icon-weixuanzhong"></i></span></div>

<div style="height: 25px"><b style="margin-right: 10px;"><span>fg(方钩):</span></b><span><i class="iconfont icon-xuanzhong3"></i></span><span><i class="iconfont icon-weixuanzhong"></i></span></div>

书写css代码。

.selectShow { height: 40px; }

.selectShow ul { list-style: none; margin: 0px; padding: 0px; }

.selectShow ul .cleanItem { border: solid thin #AFCBCF; font-size: 14px; cursor: pointer; background-color: #AFCBCF; width: 100px; }

.selectShow ul .cleanItem:hover { background-color: #AFCBBF; }

.selectShow ul li { min-width: 100px; text-align: center; float: left; height: 30px; line-height: 30px; }

.selectShow ul li i { font-size: 20px; padding: 0px 5px; }

.selectShow ul .selectItem { border: solid thin #AFCBCF; font-size: 14px; margin-left: 10px; cursor: pointer; }

.selectShow ul .selectItem:hover { border: solid thin #6699FF; }

.selectShow ul .selectItem i { float: right; margin-left: 5px; }

.selectList { height: 40px; }

.selectList ul { list-style: none; margin: 0px; padding: 0px; }

.selectList ul li { float: left; margin-left: 10px; line-height: 40px; cursor: pointer; }

.selectList ul li i { margin-right: 3px; }

.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-shanchu:before { content: "\e61c"; }

.icon-xuanzhong:before { content: "\e64a"; }

.icon-CombinedShapeCopy:before { content: "\e604"; }

.icon-xuanzhong3:before { content: "\e525"; }

.icon-weixuanzhong:before { content: "\e626"; }

.icon-xuanzhong1:before { content: "\e617"; }

.icon-qingchu:before { content: "\e630"; }

.icon-weixuanzhong1:before { content: "\e602"; }

书写并添加js代码。

<script src="js/jquery.min.js"></script>

<script src="js/multiselect.js"></script>

<script >

    $("#test").multiselectInit({

        "selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}],

        "isMulti":true,//是否多选

        "inputId":"testValue",//输入框的id

        "checkStyle":"fg"//选择的样式

    });

    $("#test2").multiselectInit({

        "selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}],

        "isMulti":false,//是否多选

        "inputId":"testValue2",//输入框的id

        "checkStyle":"yx"//选择的样式

    });

    $("#test3").multiselectInit({

        "selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}],

        "isSelectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"}],

        "isMulti":true,//是否多选

        "inputId":"testValue3",//输入框的id

        "checkStyle":"fx"//选择的样式

    });

</script>

书写multiselect.jsjs代码。

<script>

$.fn.extend({

   "multiselectInit":function(opt){

       if(typeof opt != "object"){

           alert("参数出错！");

           return;

       }

       var mid = $(this).attr("id");

       if(mid==null||mid==""){

           alert("要设定一个id!");

           return;

       }

       if(!opt.selectData instanceof Array){

            alert("selectData参数错误");

            return;

       }

       $.each(multiselectTools.getInitOption(mid), function (key, value) {

           if (opt[key] == null) {

               opt[key] = value;

           }

       });

       if(opt.isSelectData!=""){

           if(!opt.isSelectData instanceof Array){

               alert("isSelectData参数错误，数据类型应该为数组");

               return;

           }

           if(opt.isSelectData.length>1&&!opt.isMulti){

                alert("单选模式设置错误！");

                return;

           }

       }

       multiselectTools.initWithUI(opt);

       multiselectEvent.initCleanEvent(opt);

       multiselectEvent.initClickEvent(opt);

       multiselectEvent.initDeleteEvent(opt);

   }

});

var multiselectTools={

    "checkStyleArray":{

        "yx":{

            "check":"icon-xuanzhong",

            "uncheck":"icon-weixuanzhong1"

        },

        "yg":{

            "check":"icon-xuanzhong1",

            "uncheck":"icon-weixuanzhong1"

        },

        "fx":{

            "check":"icon-CombinedShapeCopy",

            "uncheck":"icon-weixuanzhong"

        },

        "fg":{

            "check":"icon-xuanzhong3",

            "uncheck":"icon-weixuanzhong"

        }

    },

    "initWithUI":function(opt){

        var appendStr ="";

        appendStr +="<div class='selectShow'>";

        appendStr +="<ul>";

        appendStr +="<li class='cleanItem'><i class='iconfont icon-qingchu'></i></li>";

        appendStr +="</ul>";

        appendStr +="</div>";

        appendStr +="<div class='selectList'>";

        appendStr +="<ul>";

        appendStr +="</ul>";

        appendStr +="</div>";

        $("#"+opt.mid).html(appendStr);

        var selectData = opt.selectData;

        $.each(selectData,function (i,itemObj) {

            $("#"+opt.mid+" .selectList ul").append("<li code='"+itemObj.colId+"' showStr='"+itemObj.colValue+"'><i class='iconfont "+multiselectTools.checkStyleArray[opt.checkStyle].uncheck+"'></i>"+itemObj.colValue+"</li>");

        });

        if(opt.isSelectData!=""){

            $.each(opt.isSelectData,function(i,itemObj){

                multiselectTools.addChecked(itemObj.colId,itemObj.colValue,opt);

                multiselectTools.toChecked(opt,itemObj.colId);

            });

            multiselectTools.setValueInput(opt.mid,opt.inputId);

        }

    },

    "toChecked":function(opt,value){

        var selectObj = $("#"+opt.mid+" .selectList ul li[code='"+value+"']");

        selectObj.attr("isCheck","true");

        selectObj.find("i").attr("class","iconfont "+multiselectTools.checkStyleArray[opt.checkStyle].check);

    },

    "toUnChecked":function(opt,value){

        var selectObj = $("#"+opt.mid+" .selectList ul li[code='"+value+"']");

        selectObj.removeAttr("isCheck");

        selectObj.find("i").attr("class","iconfont "+multiselectTools.checkStyleArray[opt.checkStyle].uncheck);

    },

    "getInitOption":function(mid){

        var option =  {

            "mid":mid,

            "isSelectData":"",

            "selectData":"",

            "isMulti":true,

            "inputId":"",

            "checkStyle":"fg"

        };

        return option;

    },

    "addChecked":function(value,showStr,opt){

        $("#"+opt.mid+" .selectShow ul").append("<li class='selectItem' code='"+value+"'>"+showStr+"<i class='iconfont icon-shanchu'></i></li>");

        multiselectEvent.initDeleteEvent(opt);

    },

    "removeChecked":function(value,opt){

        $("#"+opt.mid+" .selectShow ul .selectItem[code='"+value+"']").remove();

    },

    "getSelectValue":function(mid){

        var str="";

        var checkedObjs =  $("#"+mid+"  .selectList ul li[isCheck='true']");

        $.each(checkedObjs,function (i,itemObj) {

            str+=$(itemObj).attr("code")+",";

        });

        str  = str.substr(0,str.length-1);

        return str;

    },

    "setValueInput":function(mid,inputId){

        var str = multiselectTools.getSelectValue(mid);

        if(inputId!=""&&multiselectTools.fondExitById(inputId)) {

            $("#" + inputId).val(str);

        }

    },

    "cleanAll":function(opt) {

        $("#"+opt.mid+" .selectShow ul .selectItem").remove();

        var objs = $("#" + opt.mid + " .selectList ul li");

        objs.removeAttr("isCheck");

        objs.find("i").attr("class","iconfont "+multiselectTools.checkStyleArray[opt.checkStyle].uncheck);

        if(opt.inputId!=""&&multiselectTools.fondExitById(opt.inputId)){

            $("#"+opt.inputId).val("");

        }

    },

    "fondExitById":function(idStr){

        return  $("#"+idStr).length>0;

    }

};

var multiselectEvent ={

    "initClickEvent":function(opt){

       $("#"+opt.mid+" .selectList ul li").mousedown(function () {

           var isCheck = $(this).attr("isCheck");

           var  value=$(this).attr("code");

           var showStr = $(this).attr("showStr");

           if(isCheck){

               multiselectTools.toUnChecked(opt,value);

               multiselectTools.removeChecked(value,opt);

           }else{

               if(!opt.isMulti){

                   multiselectTools.cleanAll(opt);

               }

               multiselectTools.toChecked(opt,value);

               multiselectTools.addChecked(value,showStr,opt);

           }

           multiselectTools.setValueInput(opt.mid,opt.inputId);

       });

    },

    "initCleanEvent":function(opt){

        $("#"+opt.mid+" .selectShow ul .cleanItem").mousedown(function(){

            multiselectTools.cleanAll(opt);

        });

    },

    "initDeleteEvent":function(opt){

        $("#"+opt.mid+" .selectShow ul .selectItem i").mousedown(function(){

            var deleteObj = $(this).parent();

            var code = deleteObj.attr("code");

            deleteObj.remove();

            if(code!=null){

                multiselectTools.toUnChecked(opt,code);

            }

            multiselectTools.setValueInput(opt.mid,opt.inputId);

        });

    }

};

</script>

代码整体结构。

查看效果。