投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 表单抽奖 / jQuery多选和单选下拉框插件
jQuery多选和单选下拉框插件
标签:

插件介绍

    这是一款jQuery模拟select下拉框插件,支持多选和单选下拉框菜单选中代码。通过mySelect.getResult() 获取选择框的值。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-11
    阅读:

jQuery多选和单选下拉框插件

简要教程

这是一款jQuery模拟select下拉框插件,支持多选和单选下拉框菜单选中代码。通过mySelect.getResult() 获取选择框的值。
使用方法

在页面引入以下jquery.min.js、select.js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/select.js"></script>
<script type="text/javascript">
    $(function(){
      var mySelect= $("#mySelect").mySelect({
          mult:true,//true为多选,false为单选
          option:[//选项数据
              {label:"选项1",value:0},
              {label:"选项2",value:1},
              {label:"选项3",value:2},
              {label:"选项4",value:3},
              {label:"选项5",value:4},
              {label:"选项6",value:5}
          ],
          onChange:function(res){//选择框值变化返回结果
            console.log(res)
          }
      });
      mySelect.setResult(["1","2"]);
      var mySelect2= $("#mySelect2").mySelect({
          mult:false,
          option:[
              {label:"选项1",value:0},
              {label:"选项2",value:1},
              {label:"选项3",value:2},
              {label:"选项4",value:3},
              {label:"选项5",value:4},
              {label:"选项6",value:5}
          ],
          onChange:function(res){
              console.log(res)
          }
      });
        mySelect2.setResult(3);
    })
</script>