精华内容
下载资源
问答
  • select2多选设置select多选,select2取值和赋值

    万次阅读 热门讨论 2018-11-05 18:16:55
    select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给select赋值,可以将刚才传给...

    select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给select赋值,可以将刚才传给后端的字符串再传回前端,然后转为一位数组,再赋值给select2就会显示刚刚选中的值,赋值方法:$('#id').val(arr).trigger('change'),id为select的id属性,这里的arr是刚才从后端传回前端的id转成的一位数组。

    select2设置select多选,select2取值和赋值,首先需要引入select2的js文件,select2官网地址https://select2.org/

    //select2html代码设置选项,list为后端查询出来的选项,循环赋值

     <select name="id" id="id" multiple="multiple">
            <option value="0">请选择部门</option>
            <volist name="list" id="vo">
                <option value="{$vo.id}" <eq name="vo.id" value="$id">selected = "selected"                </eq>>{$vo.name}</option>
            </volist>
        </select>


        //可以另外设置一个隐藏的input框来存select选中的id,方便传给后端

     <input type="hidden" id="select_id" name="select_id"/>

    //select2插件初始化

      $("#id").select2({
            language : "zh-CN",
            minimumInputLength : 0,
            placeholder:"可多选",//默认值
            allowClear: true,
        })


        //select2插件赋值 

     var select_id = $("#select_id").val();
        arr = select_id.split(",");//注意:arr为select的id值组成的数组
        $('#id').val(arr).trigger('change');


        //select2多选,取值,在下拉框中选中以后,获取到选择的id值

     $('#id').change(function(){
                var o=document.getElementById('id').getElementsByTagName('option');
                var all="";
                console.log(o[1]);
                for(var i=0;i<o.length;i++){
                    if(o[i].selected){
                        all+=o[i].value+",";
                    }
                }
                
                all = all.substr(0, all.length - 1);//去掉末尾的逗号
                $("#bumen").val(all);//赋值给隐藏的文本框
            })

    select2设置select多选,select2取值和赋值大概就这些了,也是网上找了很多资料,尝试了很多次,因为刚开始不知道$('#id').val(arr).trigger('change');里面的arr是个啥,最开始以为是数据,text,赋值了一些字符串,所以一直没用。

     

    阿里云学生机(24岁以下自动获得学生身份)优惠地址,服务器购买,各种云服务购买:https://promotion.aliyun.com/ntms/act/campus2018.html?userCode=cyn41gba

    腾讯云双十一优惠:
    https://cloud.tencent.com/act/cps/redirect?redirect=1048&cps_key=1f197f58b18ff5752c34467efca408fc&from=console

    展开全文
  • select2 取值 遍历 设置默认值

    万次阅读 2015-11-22 16:26:48
    select2 取值 遍历 设置默认值 本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法。Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题。但同时,Select2也有很多吭。 效果图: ...

    select2 取值 遍历 设置默认值


    本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法。Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题。但同时,Select2也有很多吭(单选下拉框有明显的搜索输入框,而多选下拉框没有,但实际也支持多选。直接在input框输入即可)。

    效果图:



    需求:使用Select2实现下拉框多选,并获取选中值,初始设置默认值

    技术:select2.js ,prototype.js,jquery.js

    源码:https://github.com/ITDragonBlog/daydayup/tree/master/JQuery-select2/select2-4.0.0

    说明:select2是jquery插件,取值和设置默认值都可以用jquery单独完成。为什么用prototype.js ?因为在公司用prototype.js 写的,笔者因为各种原因,没有用jquery重写(原谅我比较懒)。还有一点值得注意:获取的文本值可能有空格哦!!!笔者就是被吭了一脸!

    一切尽在代码中:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>select2实例</title>
    <<link rel="stylesheet" href="bootstrap/3.3.0/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="select2-4.0.0/dist/css/select2.min.css" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="select2-4.0.0/dist/js/select2.min.js"></script>
    
    </head>
    <body>
    	<label class="control-label col-sm-1">个性标签(checkbox): </label>
    	<div class="col-sm-3">
    		<select class="select_gallery-multiple" multiple="multiple" style="width:100%;" οnchange="getSelectData()" id="mul-itdragon">
    			<optgroup label="这样真的好么?">
    				<option value="0">打野</option>
    				<option value="01">上单</option>
    				<option value="02">中单</option>
    				<option value="03">送人头</option>
    			</optgroup>
    			<optgroup label="职位">
    				<option value="1">土豪</option>
    				<option value="2">屌丝</option>
    				<option value="3">单身dog</option>
    				<option value="4">苹果粉</option>
    				<option value="5">苦逼程序员</option>
    			</optgroup>
    		</select>
    	</div>
    	<label class="control-label col-sm-1">个性标签(radio): </label>
    	<div class="col-sm-3">
    		<select class="select_gallery" style="width:100%;" id="itdragon">
    			<optgroup label="这样真的好么?">
    				<option value="0">打野</option>
    				<option value="01">上单</option>
    				<option value="02">中单</option>
    				<option value="03">送人头</option>
    			</optgroup>
    			<optgroup label="职位">
    				<option value="1">土豪</option>
    				<option value="2">屌丝</option>
    				<option value="3">单身dog</option>
    				<option value="4">苹果粉</option>
    				<option value="5">苦逼程序员</option>
    			</optgroup>
    		</select>
    	</div>
    	<script type="text/javascript">
    		var $jq = jQuery.noConflict();
    		
    		// 初始化多选select2
    		$jq(".select_gallery-multiple").select2();
    		
    		// 初始化单选select2
    		$jq(".select_gallery").select2();
    		
    		// 默认选择
    		select2ByText ("mul-itdragon", "苦逼程序员");
    		select2ByValue ("itdragon", "03");
    		
    		// 通过id获取select2的value值
    		function getSelect2Value(obj) {
    			var select2Obj = $jq('#'+obj).select2();
    			return select2Obj.select2("val");
    		}
    
    		// 通过id获取select2的text值,这里的text值可能有空格,需注意
    		function getSelect2Text(obj) {
    			var select2Obj = $jq('#'+obj).select2();
    			return select2Obj.find("option:selected").text();
    		}
    
    		// 通过text 设置select2的默认值
    		function select2ByText (obj, text) {
    			var select2Obj = $jq('#'+obj).select2();
    			$(obj).select("option").each(function(data){
    				if (text == data.text.strip()) {
    					select2Obj.val(data.value).trigger("change");
    				}
    			});
    		}
    
    		// 通过value 设置select2的默认值
    		function select2ByValue (obj, value) {
    			var select2Obj = $jq('#'+obj).select2();
    			select2Obj.val(value).trigger("change");
    		}
    		
    		function getSelectData(){
    			console.log(getSelect2Value("mul-itdragon"));
    			console.log(getSelect2Text("itdragon"));
    			var mulItdragonVal = $jq("#mul-itdragon").select2("val");
    			if (null == mulItdragonVal) {
    				console.log("Over !");
    				return ;
    			}
    			console.log(mulItdragonVal);
    			var mulItdragonData = $jq("#mul-itdragon").select2('data');
    			mulItdragonData.each(function(data){
    				console.log("value : ", data.id);
    				console.log("text : ", data.text);
    			});
    			
    		}
    	</script>
    </body>
    </html>

    这样就做好了,是不是很简单,如果不能满足你的需求,可以去官网学习:http://select2.github.io/examples.html

    资源下载:http://download.csdn.net/detail/qq_19558705/9290851 (本来是0积分分享的,被csdn设置成15积分。大家就用上面的github地址吧)

    展开全文
  • select标签取值

    千次阅读 2019-04-23 19:07:17
    select <select id="search" value="1"> <option>1</option>...2</option> <option>3</option> <option>4</option> </select> var select_...

    select

    获取select选中的值,并更新select的value值和option的选中属性

    <select id="search" value="1">
    	<option>1</option>
    	<option>2</option>
    	<option>3</option>
    	<option>4</option>
    </select>
    
    var select_val = $('#search').val();//获取当前选中的值
    $('#search').children("option").each(function () {
    	var option = $(this).text();
    	if (option == select_val) {//如果相等则设置为默认选中显示
        	$('#search').attr('selected', true);
        } else {
    	   $('#search').attr('selected', false);
       }
    });
    $('#search').attr('value', $(this).val());
    
    展开全文
  • 关于select取值总结,有多种方法 <select onchange="refreshValue(this),selectInput(this)"> 请选择 文本一 文本二 文本三 </select>
  • jquery模拟SELECT框,效果图如下: 代码如下: <!DOCTYPE html> <html lang=”en”> <head> <title>jquery模拟SELECT框</title> <meta charset=”utf-8″> <style> body{...
  • struts2 <s: select 标签取值

    千次阅读 2014-04-28 23:25:09
    JSP页面: listValue="name" key="name" cssStyle="width:130px"> 后台: private List navs; ...navs=navservice.allNav();调用dao层取得所有的值...注: listValue="name"通过设置这个属性显示所有的select内容

    JSP页面:

    <s:select label="父级导航"  value="id" name="navson.pid" list="navs"  listKey="id" listValue="name"  key="name"   cssStyle="width:130px">

    后台:

    private  List<Nav> navs;

    navs=navservice.allNav();调用dao层取得所有的值集合。

    注: listValue="name"通过设置这个属性显示所有的select内容



    展开全文
  • jquery操作select(取值,设置选中).pdf
  • jquery 操作select(取值,设置选中).pdf
  • spring mvc 2select取值

    千次阅读 2015-08-19 14:24:13
    <tr><td>频道:</td><td><sf:select id="activity_project" path="category" onchange="test()" style="width:150px"> <sf:option value="0">--请选择-- ${categoryList}"/> </sf:select></td></tr> <tr><td>...
  • select实现取值与重置

    千次阅读 2018-04-23 22:39:06
    select实现取值与重置,这里是一个简单的例子,有需要的同学可以参考下,代码如下&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "...&gt;&...Tit...
  • Bootstrap-select2 ajax动态取值赋值

    千次阅读 2019-04-26 19:42:38
    最近接手了一个bootstrap框架的项目,下拉列表采用的select2,对于select说好处是支持搜索、多选,但是取值、赋值就麻烦许多了。直接上代码 $('#id’).select2({ dropdownParent: $("#parent"), width:200, ...
  • 通过js jQuery 取值
  • BS4 select 方法取值

    千次阅读 2018-12-15 14:18:03
    # -*- coding: utf-8 -*- import requests from bs4 import BeautifulSoup ... ...print (Soup.select('tr a')[0]) #取第一条a ...print (Soup.select('tr a')[0].string) #取a中的值(string)  
  • select下拉框取值与清空数据

    千次阅读 2019-12-17 09:36:59
    获取select被选中的option的值 1.js实现 var selected = document.getElementById(‘selectedId’); //定位id var index = selected.selectedIndex; // 选中索引 var text = selected.options[index].text; // 选中...
  • jquery、select取值 、操作

    千次阅读 2019-04-24 15:00:30
    jquery操作select(增加,删除,清空) 1. $("#select_id").change(function(){//code...});...2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的 3. var chec...
  • jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var ...
  • jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关.pdf
  • select2.js 取值 遍历 设置默认值

    千次阅读 2018-03-10 12:09:08
    本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法。Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题。但同时,Select2也有很多吭(单选下拉框有明显的搜索输入框,而多选下拉框...
  • jquery操作select(取值,设置选中)

    千次阅读 2016-01-04 15:43:34
    jquery操作select(取值,设置选中) http://blog.csdn.net/nairuohe/article/details/6307367 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。 比如 1、设置value为...
  • vue select取值

    2019-02-16 16:49:35
    select name="" id="" v-model="blog.author"&gt; &lt;option value="" v-for="author in authors" :value="author"&gt;{{author}}&...
  • select标签取值问题

    2007-09-22 15:59:55
    var aa=document.getElementById("abc"); value:aa.value; text:aa.options[aa.selectedIndex].text
  • 获取当前select的选中值可以这样做: var osName = $("#selOsName").find("option:selected").val();或者直接var osName = $("#selOsName").val();实际测试好用建议第一个比较好。 设置select选中某一值可以这样...
  • jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(input[@name=items][@checked]).val(); 获取select被选中项的文本 var item ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 140,121
精华内容 56,048
关键字:

select2取值