精华内容
下载资源
问答
  • select2详细介绍与相关文件的下载可以参考 http://select2.github.io/select2/ select2组件效果 效果图如下: 即支持多选,支持根据输入进行相似查询,支持值初始化,使用及其方便。 1 下载...

    select2详细介绍与相关文件的下载可以参考 http://select2.github.io/select2/

    select2组件效果
    效果图如下:

    即支持多选,支持根据输入进行相似查询,支持值初始化,使用及其方便。

    1 下载(http://select2.github.io/select2/)并引入相关的文件,包括jquery和select2的文件

      <script type="text/javascript" src="../fe-res/js/jquery.min.js"></script>
        <script src="../resource/select2/js/select2.js"></script>
        <link rel="stylesheet" href="../resource/select2/css/select2.css">
        <script src="../resource/select2/js/select2.min.js"></script>
        <link rel="stylesheet" href="../resource/select2/css/select2.min.css">

    2  后台数据请求,并跳转到jsp

        @RequestMapping(value="/reportset/testselec2.action")
        public String testselec2(ModelMap modelMap,ServletResponse response ){
            List<ReportsetDto> reportsetDtos = reportsetService.listReportset("1=1", 1, 30);
            modelMap.put("list", reportsetDtos);
            return "reportset/select2test-exp";
        }

    3 jsp页面,包括获取选中内容,绑定事件,初始化等

    <script language="javascript">
        $(document).ready(function() {
            // select2模式化
            $("#e1").select2();
            // 根据value来初始化
            $("#e1").val(["0","1","2"]).select2();
            // 绑定change事件
            $("#e1").on("change", show);
        });
    
        // 弹出当前选择的value
        function show(){
            // 获取选中的对象
            var reslist1=$("#e1").select2("data"); //多选,获取object
            // 获取选中的对象的值,逗号拼接
            var reslist=$("#e1").val(); //多选,获取object
            alert(reslist);
        }
    </script>
    
    <body style="background-color: #ffffff;">
    <div>
        <select id="e1"   multiple style="width: 200px">
            <option   value="1">Alabama</option>
            <option  value="2">byoming</option>
            <option value="3">Chinese</option>
            <option value="4">dhina</option>
            <c:forEach var="key" items="${list}" varStatus="keyIndex">
                <option value="${key.id}">${key.name}</option>
                &nbsp;
            </c:forEach>
        </select>
        <input type="button" value="show" onclick="show();">
    </div>
    </body>

     

    展开全文
  • var array = new Array(); $('input:checkbox[name=item]:checked').each(function(){ array.push($(this).parents('td').siblings('.planId').attr('id'));//向数组中添加元素 }); ......
    var array = new Array();
     
    $('input:checkbox[name=item]:checked').each(function(){  
                
        array.push($(this).parents('td').siblings('.planId').attr('id'));//向数组中添加元素  
            
    });

     

    展开全文
  • 多选select框常用函数,从左边的复选框选出到右边复选框 multipleSelect.js

    多选select框常用函数,从左边的复选框选出到右边复选框

    multipleSelect.js

    /**  多选select框常用函数,从左边的复选框选出到右边复选框
     *  @author QUJIAYUAN076
     *  @date 2014-06-13
     */
    
    /**
     * 复选框选择全部
     * 
     * @param multipleSelectId
     *            复选select的ID
     * @returns
     */
    function multipleSelectAll(multipleSelectId) {
        var multipleSelect = document.getElementById(multipleSelectId);
        for (var i = 0; i < multipleSelect.options.length; i++) {
            multipleSelect.options[i].selected = true;
        }
    }
    
    /**
     * 复选框取消选择全部
     * 
     * @param multipleSelectId
     *            复选select的ID
     * @returns
     */
    function multipleUnSelectAll(multipleSelectId) {
        var multipleUnSelect = document.getElementById(multipleSelectId);
        for (var i = 0; i < multipleUnSelect.options.length; i++) {
            multipleUnSelect.options[i].selected = false;
        }
    }
    
    /**
     * 从备选multipleSelect挑选指定的option至目标multipleSelect
     * 
     * @param srcSelectId
     *            备选multipleSelect的id
     * @param desSelectId
     *            目标multipleSelect的id
     * @returns
     */
    function moveMultipleOption(srcSelectId, desSelectId) {
        var src = document.getElementById(srcSelectId);
        var des = document.getElementById(desSelectId);    
        if (src.selectedIndex == -1) {              
            return;    
        }    
        for (var i = 0; i < src.length; i++) {      
            if (src[i].selected) {        
                var op = document.createElement("option");
                op.value = src.options[src.selectedIndex].value;
                op.text = src.options[src.selectedIndex].text;
                des.options.add(op);
                src.remove(i);
                i--;
            }    
        }  
    }
    
    /**
     * 将目标multipleSelect的值组装成以“@”号连接的字符串
     * 
     * @param multipleSelectId
     *            目标multipleSelect的id
     * @returns 组装后的字符串
     */
    function getMultipleSelectValue(multipleSelectId) {
        var multipleSelect = document.getElementById(multipleSelectId);
        var selectedValue = "";
        for (var i = 0; i < multipleSelect.options.length; i++) {
            selectedValue += multipleSelect.options[i].value + "@";
        }
        if(selectedValue.indexOf(",") != -1) {
        	selectedValue = selectedValue.substring(0, selectedValue.length - 1);
        }
        return selectedValue;
    }


    html:

    <!DOCTYPE html>
    <html>
    <head>
    <title>多选select框常用函数,从左边的复选框选出到右边复选框</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <script language="JavaScript" src="multipleSelect.js"></script>
    <script language="JavaScript"> 
     
     
    function getsignNamesValue() {
    	var signNames = document.getElementById("signNames");
    	signNames.value = getMultipleSelectValue("rightSelect");
    }
     
    </script>
    </head>
    <body>
     
    <table>
    	<tr>
    		<td style="vertical-align: top;">
    		请选择城市(双击):<br/>
    			<select id="leftSelect" name="leftSelect" οndblclick="moveMultipleOption('leftSelect','rightSelect');" multiple="multiple" style="width: 300px;height:180px;">
    				<option value="1">北京</option>
    				<option value="2">上海</option>
    				<option value="3">广州</option>
    				<option value="4">深圳</option>
    				<option value="5">成都</option>
    				<option value="6">天津</option>
    				<option value="7">南京</option>
    				<option value="8">杭州</option>
    				<option value="9">武汉</option>
    				<option value="10">沈阳</option>
    				<option value="11">长沙</option>
    				<option value="12">重庆</option>
    				<option value="13">济南</option>
    				<option value="14">福州</option>
    				<option value="15">厦门</option>
    			</select>
    		</td>
    		<td style="vertical-align: middle;">
    			<input id="btnRight" name="btnRight" class="button1" type="button" οnclick="moveMultipleOption('leftSelect','rightSelect');" value=">>">
    			<br/>
    			<input id="btnLeft" name="btnLeft" class="button1" type="button" οnclick="moveMultipleOption('rightSelect','leftSelect');" value="<<" >
    		</td>
    		<td>已选择的城市:<br/>
    			<input type="hidden" id="signNames" name="signNames" value=""/>
    			<select id="rightSelect" name="rightSelect" οndblclick="moveMultipleOption('rightSelect','leftSelect');" multiple="multiple" style="width: 300px;height:180px;">
    			</select>
    		</td>
    		<td> <input type="submit" name="submit" value="查询" class="button2" />
    		</td>
    	</tr>
    	<tr>
    		<td style="text-align: right;"><a href="javascript:multipleSelectAll('leftSelect');">全选</a> <a
    						href="javascript:multipleUnSelectAll('leftSelect');">取消全选</a></td>
    		<td></td>
    		<td style="text-align: right;"><a href="javascript:multipleSelectAll('rightSelect');">全选</a> <a
    						href="javascript:multipleUnSelectAll('rightSelect');">取消全选</a></td>
    		<td>
    		</td>
    		
    	</tr>
    </table>
     
     
    </div>
    </body>
    



    展开全文
  • select复选框带全选

    2019-03-14 17:14:39
    bootstrap select复选框,可单选,多选,全选,带索引功能
  • b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中 /** * 全选函数 * @param mainId 主复选框id * @param klass 下属复选框的class */ function selectAll(mainId,klass){ $("." ...

    1.功能:

    a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态

    b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中


    /**
     * 全选函数
     * @param mainId 主复选框id
     * @param klass 下属复选框的class
     */
    function selectAll(mainId,klass){
    	$("." + klass).each(function(){
    	    if($("#" + mainId).attr("checked")== "checked"){
    	    	$(this).attr("checked", "checked");
    	    }
    	    else{
    	    	$(this).removeAttr("checked");
    	    }
    	});
    }

    以上实现全选及全部取消 所有子复选框,至于数据的实现则在控制器里接收到复选框的数组即可

    /**
     * 子复选框有一个选中 父复选框就选中 <br>子复选框全不选 父复选框不选中
     * @param father 父复选框的id
     * @param son 子复选框的class
     */
    function checkSonCheckBox(father,son){
    	$("."+son).click(function(){
    		if($(this).attr("checked")== "checked"){
    			$(this).addClass("checked");
    		}else{
    			$(this).removeClass("checked");
    		}
    		if($("."+son).hasClass("checked")){
    			$("#"+father).attr("checked","checked");
    //			console.log("至少有一个子复选框选中!");
    		}else{
    			$("#"+father).removeAttr("checked");
    //			console.log("所有子复选框都未选中!");
    		}
    	});
    };

    以上实现 一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中


    展开全文
  • bootstrap-select插件实现复选框

    千次阅读 2017-08-14 14:09:39
    bootstrap-select插件 源码地址分享:链接:http://pan.baidu.com/s/1i5R5FaX 密码...   实现复选框实现图 Index.jsp  <!-- 2.3.2 --> $(window).on('load', func
  • 支持select显示复选框的JS列表框插件,插件名称:dhtmlxCombo,版本 v.2.1,它包括Image Select和Check Select两种功能插件,可以帮助你在下拉框的选项中添加一幅图片,或者在下拉框中使用复选框,具体可以看code...
  • 1是为了点击此复选框跳转到响应函数selectAll,在此响应函数下定义其他复选框状态更改 2是设置其他复习框的class属性值都相同,为了更改状态时统一操作 复选框状态响应函数 2就是跳转的函数 3表示:对class属性...
  • jQuery获取select复选框选中的文本值和value
  • 4. bootstrap-select 重置下拉框复选框中的值  ( 4.1 ) jsp页面 ( 4.2 )js代码 表单重置 function formReset() { $("#permForm input").val(''); $("#permForm select").val(''); $("#...
  • vue select下拉框添加复选框

    千次阅读 2020-07-24 14:35:07
    vue select下拉框添加复选框 实现效果 直接改变选中样式: <el-select v-model="alarmStatu" size="small" multiple collapse-tags clearable :loading="loading" width="220px" @change="s
  • 复选框数组与Select Case语句

    千次阅读 热门讨论 2018-08-27 09:54:18
    为了实现当复选框(数组)取消选择时,去掉所对应Text的内容,我选择用了Select语句,发现了一些问题。 问题代码: Private Sub Check1_Click(Index As Integer) i = Index '将所点击check数组的index赋值给i ...
  • 需求:要求给select多选的时候,给下拉框前加上复选框样式 element select原样式 需要更改后的样式 html <el-select v-model="searchObj.knowledgeIds" class="select-box" filterable multiple ...
  • 这里写自定义目录标题el-select复选框多选样式在vue中声明下拉选绑定的数据显示插入到数据库中的el-select多选的数据 el-select复选框多选样式 <el-select clearable v-model="type" multiple > <el-...
  • 项目中遇到一种情况:某个复选条件选项太多,把页面撑得很难看。如果有一个下拉复选框,就可以非常好地解决此问题。
  • 将选择转换为多选复选框 介绍 复选框列表对于允许用户在选择框中选择多个选项很有用。但在这种情况下,可以通过按住控制(ctrl)按钮选择多个选项,用户讨厌这个。您可以使用jQuery进行多选复选框下拉列表,而不是...
  • HTML复选框

    2018-06-20 21:49:17
    是否因为前端页面中select每次只能选一个选项的困惑而苦恼?使用这个复选控件吧,轻松实现复选框功能。每次可以选多个选项。效果美观。
  • element中select中使用复选框

    千次阅读 2020-12-07 18:34:45
    element中select框中使用复选框 script中代码 下面展示一些 内联代码片。 checkBoxfile(val) { let listClone = this.isFileList; this.isFileList = []; if (val.length === 0) { listClone.forEach((item) =&...
  • django 后台获取复选框或者select多行

    千次阅读 2012-10-22 17:13:15
    django 后台获取复选框或者select多行   以前一直用这个方法request.POST.get('zhiwu'),这样只能获取列表的最后一项,后来我发现我错了。换成这个方法,才能获取列表request.REQUEST.getlist('zhiwu'),select多行...
  • 代码如下:/** * 全选函数 * @param mainId 主复选框id * @param klass 下属复选框的class */function selectAll(mainId,klass){ $(“.” + klass).each(function(){ if($(“#” + mainId).attr(“checked”)=...
  • bootstrap-select插件,jquery实现的下拉选择。
  • 一、jquery实现单选并选中value=”2”的项: html代码: value="1" />1 <input type="radio" name="radio" value="2" />2 <input type="radio" name="radio" value="3" />3js代码实现:jQuery("input[ty
  • angularJS的复选框

    2019-05-28 14:16:41
    参考链接:http://isteven.github.io/angular-multi-select/#/configs-options 链接已经写的很详细了。... input-model="复选框里的各个选项" output-model="复选框按钮默认展示的选项" button-label="复选...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,556
精华内容 27,022
关键字:

复选框的select