使用 Select2 下拉框实现复选

使用 Select2 下拉框实现复选

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery And Select2 Demo</title>
    <link href="./fSelect.css" rel="stylesheet" type="text/css">
</head>
<body style="">
    <select class="demo hidden" multiple="multiple" id="all">
        <option value="1">苹果</option>
        <option value="2">菠萝</option>
        <option value="3">蜜桃</option>
        <option value="4">香蕉</option>
        <option value="5">桃子</option>
        <option value="6">西瓜</option>
    </select>
    <input type="button" value="取值"
    onclick="alert($('#all').val())" />
    <input type="button" value="赋值1"
    onclick="$('.fs-label').text('苹果,菠萝');" />
    <!--//给select2赋值时为数组
    //可以将 1,2 转成数组
    //
    //var lb = msg.obj.gblb;
    //slb = lb.split(",");
    $("#all").val(slb).trigger("change");-->
    <input type="button" value="赋值2"
     onclick='$("#all").val(["1","2"]).trigger("change");' />
    <script type="text/javascript " src="../js/jquery-1.10.2.min.js " ></script>
    <script src="./fSelect.js "></script>
        <script>
            //初始化下拉框
            $(function() {
                $('.demo').fSelect();
            });
        </script>

</body>
</html>
  • 效果图

原文地址:https://www.cnblogs.com/renxiuxing/p/11361201.html

时间: 2024-10-10 11:20:07

使用 Select2 下拉框实现复选的相关文章

select 下拉框的复选

<td>近期活动</td> <td> <select id="activities" name="activities" data-options="editable:true" style="width:200px;height:30px"> </select> <div id="sp"> <c:forEach items=&q

extjs下拉框添加复选框

var gyslxcm = Ext.create('Ext.form.field.ComboBox',{        id            : 'gyslxcm',        store         : gyslxstore,        multiSelect : true,        editable      : false,        xtype         : 'textfield',        allowBlank    : true,       

[oldboy-django][2深入django]Form组件实现生成: select下拉框, checkbox复选框,radio单选框以及如何实现自定义数据格式要求

1 需求 - 1Form组件如何实现生成选择类标签: select,check, radio - 默认值 - 保留上次输入的值 - 2自定义验证规则 - RegexField - -

selemiun 下拉菜单、复选框、弹框定位识别

一.下拉菜单识别 对下拉框的操作,主要是通过Select 类里面的方法来实现的,所以需要new 一个Select 对象(org.openqa.selenium.support.ui.Select)来进行操作 public void selectDemo() throws InterruptedException { driver.get("http://tieba.baidu.com/f/search/adv?red_tag=v3168911135"); driver.manage()

模拟select下拉框之多选(数据源采用模拟Ajax数据--原创)

最近需要一个下拉多选,本来想偷懒的,所以在网上百度了一番,最终还是发现没有一个符合自己要求的,所以我自己写了一个插件.下面是GIF动态效果图展示 相信大家已经看到效果了,接下来就是我的代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟select下拉框之多选</title> <style

JS-日期框、下拉框、全选复选框

<!-- 下拉框 --><link rel="stylesheet" href="static/ace/css/chosen.css" /> <!-- 日期框 --><link rel="stylesheet" href="static/ace/css/datepicker.css" /> <!-- 日期框 --> <script src="stati

extjs下拉框,多选,单选,动态传值

后台java代码 @RequestMapping(params = "command=adduser") public void getUser(HttpServletResponse response) throws Exception{ JSONObject result1 = new JSONObject(); JSONArray rows1 = new JSONArray(); String search ="1=1"; List<Inducedcau

下拉框,多选按钮,单选按钮的保存修改

下拉框的使用: <tr> <th>设计风格:</th> <td> <select name="DesignStyle" class="select"> <option value="1" @(Html.ValueFor(m => m.StayGrade).ToString() == "1" ? "selected" : "&q

下拉框、多选框、单选框 通过TagHelper绑定数据

在DataSocure通过枚举 实现下拉菜单 在DataSocure通过配置 实现下拉菜单 在DataSocure通过Sql 实现下拉菜单 在页面上通过枚举 实现下拉菜单 在页面上通过配置 实现下拉菜单 在页面上通过实体 实现下拉菜单 在DataSocure通过枚举 实现单选框 在DataSocure通过配置 实现单选框 在DataSocure通过Sql 实现单选框 在页面上通过枚举 实现单选框 在页面上通过配置 实现单选框 在页面上通过实体 实现单选框 在DataSocure通过枚举 实现多选