精华内容
下载资源
问答
  • 从https://github.com/Semantic-Org版本2.x借用CSS支持Vue.js vue-search-select一个Vue.js搜索选择组件,没有依赖。 从https://github.com/Semantic-Org版本2.x借用CSS支持Vue.js 2.x五种选择组件ModelSelect(从...
  • }, 原生: 请选择 未处理 处理中 处理完成 data(){ rerurn { selectvalue: "", searchoptions: [ { ID: "1", VersionNames: "寿司君" }, { ID: "2", VersionNames: "双皮奶" } ], } } {{item.VersionNames}} this....

    https://blog.csdn.net/weixin_41056945/article/details/92382436

    https://blog.csdn.net/u014717572/article/details/83868192

     option 选项内容写在JS中的,通过v-for来遍历的:

    通过v-model可以获取到选中的值,如果option中存在value属性,优先获取value值即coupon.id,如果不存在,则获取option的文本内容,也就是下面代码中coupon.name.

    通过绑定、设置ID 获取到相应的值:this.value = JSON.stringify(this.DataList.checkId);(ID绑定为字符串类型)

    data:{
      couponList:[
      {
        id: 'A',
        name: '优惠券1'
      },
      {
        id: '1',
        name: '优惠券2'
      },
      {
        id: '2',
        name: '优惠券3'
      }
     ],
       couponSelected: '',
    },
    
    <!-- 通过绑定、设置ID 获取到相应的值 -->
    <select name="public-choice" v-model="couponSelected" @change="getCouponSelected">                                        
        <option :value="coupon.id" v-for="coupon in couponList" >{{coupon.name}}</option>                                    
    </select>
    
    created(){
         //如果没有这句代码,select中初始化会是空白的,默认选中就无法实现
          this.couponSelected = this.couponList[0].id;
          //或者在接口中 直接获取到ID
          this.couponSelected = datas.couponid;
    },
          methods:{
         getCouponSelected(){
          //获取选中的优惠券
          console.log(this.couponSelected)
        }
    }

    element:

    <el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="getChange">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"    </el-option>
    <!--:value="item" -->
    </el-select>
    
    
    getChange(val) {
    console.log(val)
        //this.code = val.code;
        //this.name = val.label;
        //console.log("选择的name为:" + this.name, "选择的code为:" + this.code);
        //console.log(val);
    },
    原生:
    
     <select name="status" id="status" v-model="selected">
         <option value="">请选择</option>
         <option value="1">未处理</option>
         <option value="2">处理中</option>
         <option value="3">处理完成</option>
    </select>
    data(){
        rerurn {
            selectvalue: "",
            searchoptions: [
            {
              ID: "1",
              VersionNames: "寿司君"
            },
            {
              ID: "2",
              VersionNames: "双皮奶"
            }
          ],
        }
    }
     <select class="select_appname" v-model="selectvalue">
                      <option
                        v-for="(item,index) in selectoptions"
                        :key="index"
                        :value="item.ID"
                      >{{item.VersionNames}}</option>
    </select>
    
    this.selectvalue = datas.VersionNameID;

     

    展开全文
  • 有时,需要对编辑行中的某列的内容通过选择来完成,以保证数据的一致性、规范性...可设置colModel的label的属性edittype: "select",同时指定editoptions 属性值 colModel: [ { label: '是否筛选', name: ...

    有时,需要对编辑行中的某列的内容通过选择来完成,以保证数据的一致性、规范性。

    可设置colModel的label的属性 edittype: "select",同时指定 editoptions 属性值

            colModel: [
                  {
                      label: '是否筛选',
                      name: 'IsSearch',
                      width: 80,
                      editable: true,
                      edittype: "select",
                      editoptions: {value: "false:否;true:是"} //默认为否
                  }]

    value值:放在第一个元素为默认选中项

     

    转载于:https://www.cnblogs.com/senyier/p/7308038.html

    展开全文
  • 工作中用到了,到这里记录一下 ...//这里写一个option是为了给下拉项一个默认选择项 </select> 然后在js中通信后进行动态赋值,这里贴上关键代码 for (var i = 0; i < textlist.length; i++) { $

    工作中用到了,到这里记录一下
    先是写一个select标签

    <select name="interest-search"  id="test" lay-verify="required">
         <option>请选择</option>//这里写一个option是为了给下拉项一个默认选择项
    </select>
    

    然后在js中通信后进行动态赋值,这里贴上关键代码

    for (var i = 0; i < textlist.length; i++) {
    $('#test').append(new Option(文本, value值)); // 第一个是显示的文本,第二个是key值							
    }
    layui.form.render("select"); 
    

    如何监听select下拉框的值,可以看我另外一篇~
    layui 下拉框select 监听值

    展开全文
  • 它可对列表进行分组,同时也可禁用某些选择项。 先来看下插件的效果:   跟这个比起来,原来的select样式是不是弱爆了! 马上来武装我们的select吧: 1、先把js和css文件引用到网

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。

    先来看下插件的效果:

     

    跟这个比起来,原来的select样式是不是弱爆了!

    马上来武装我们的select吧:

    1、先把js和css文件引用到网页里面去:

    ?
    1
    2
    3
    < link  href = "js/jqueryUI/chosen/chosen.css"  type = "text/css"  rel = "stylesheet"  />
    < script  type = "text/javascript"  src = "js/jquery.1.4.4.min.js" ></ script >
    < script  type = "text/javascript"  src = "js/jqueryUI/chosen/chosen.jquery.js" ></ script >

    2、创建一个select元素,如下: 

    ?
    1
    2
    3
    4
    5
    6
    7
    < select  name = "dept"  style = "width: 150px;"  id = "dept"  class = "dept_select"
         < option  value = "部门1" >部门1</ option >
         < option  value = "部门2" >部门2</ option >
         < option  value = "部门3" >部门3</ option >
         < option  value = "部门4" >部门4</ option >
         < option  value = "部门5" >部门5</ option >
    </ select >

    3、然后在js中调用Chosen定义的方法:

    ?
    1
    2
    3
    $( function (){
         $( '.dept_select' ).chosen();
    });

    4、搞定收工,屌丝立马变成高富帅有木有~ 

     



     

     

      

     

     

    chosen插件的一些设置项:

    1、默认文字选项

    你可以在select元素上添加data-placeholder属性定义默认文字,也就是在没有选择选项的情况下,显示的文字。 

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    < select  data-placeholder = "选择部门"  style = "width:150px;"  class = "dept_select" >
         < option  value = "-1" ></ option >
         < option  value = "部门1" >部门1</ option >
         < option  value = "部门2" >部门2</ option >
         < option  value = "部门3" >部门3</ option >
         < option  value = "部门4" >部门4</ option >
         < option  value = "部门5" >部门5</ option >
    </ select >

    这里还要注意一点,要想显示出默认文字,select下的第一个选择项必须为空的option。

     

    2、对其方式
    选项文字默认是左对齐的,可以在class属性中加入“chzn-rtl”来设置右对齐: 

    ?
    1
    < select  data-placeholder = "选择部门"  class = "dept_select chzn-rtl"  style = "width:150px;" >

     

    3、JS参数设置

    在调用chosen()方法时,我们可以设置一些参数: 

    选项 描述
    no_results_text 无搜索结果显示的文本
    allow_single_deselect 是否允许取消选择
    max_selected_options 当select为多选时,最多选择个数

     

    ?
    1
    2
    3
    4
    5
    $( ".some_select" ).chosen({
         /*max_selected_options: 2,*/
         no_results_text: "没有找到" ,
         allow_single_deselect: true
    });

     

    4、事件

      a) change事件:

    ?
    1
    2
    3
    $( ".dept-select" ).chosen().change( function (){
         //do something...
    });

      b) 当我们需要动态更新select下的选择项时,该怎么办呢?只要在更新选择项后触发Chosen中的liszt:updated事件就可以了:   

    ?
    1
    2
    //...$(".dept-select").html('...<option>部门6</option>...');
    $( ".dept-select" ).trigger( "liszt:updated" );

     

    其他问题:

    1、如果不想要搜索框的话,很简单,用css把它隐藏掉就OK了:

    ?
    1
    2
    3
    .chzn-container-single .chzn-search {
         display : none ;
    }

    2、做为天朝的程序猿,不得不考虑ie6和ie7下的情况。好吧,用ie6打开一看,select还是一副屌丝样!  

      翻看chosen.jquery.js发现在chosen方法中有如下一段,ie6和ie7直接返回select对象本身: 

    ?
    1
    2
    3
    if  ($.browser.msie && ($.browser.version === "6.0"  || ($.browser.version === "7.0"  && document.documentMode === 7))) {
         return  this ;
    }

      把这段js注释掉,重新打开ie6和7,不再屌丝了有木有!虽然箭头图片和搜索图片不透明不和谐(用js处理下就和谐了)。。。

      终于能高高兴兴地在ie6使用了,尼玛过了会又发现问题了,还是坑爹的ie6和7!如果2个select在一起又不和谐了,请看:

     

      点开选择部门,尼玛这是闹哪样!见图: 

     

      好吧,这应该是z-index的问题,把css修改下,结果各种div各种z-index改到吐血还是这副死样子。

      最后没办法了,想了个笨办法,动态改变所有chzn-container的z-index,在点击select的时候让当前container的z-index最高,让其他select的chzn-container的z-index变低。在chosen.jquery.js中找到此方法:

    ?
    1
    2
    3
    4
    5
    6
    Chosen.prototype.activate_field = function () {
         this .container.addClass( "chzn-container-active" );
         this .active_field = true ;      
         this .search_field.val( this .search_field.val());
         return  this .search_field.focus();
    };

      将此方法改为:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Chosen.prototype.activate_field = function () {
         this .container.addClass( "chzn-container-active" );
         this .active_field = true ;      
         this .search_field.val( this .search_field.val());
         var  zindex = 1010;
         this .container.css( 'z-index' , '1010' )
         $( '.chzn-container' ).not( this .container).css( 'z-index' ,--zindex);
         return  this .search_field.focus();
    };

      当然,你也可以在生成.chzn-container的时候按顺序赋予不同的z-index,这样就可以不用每次点击select都要重新设一遍了。

      至此,ie6和ie7下使用Chosen基本没什么问题了。。。  

      

     

      原创文章,转载请注明。本文链接地址:[jqueryUI] - Chosen:select下拉选择框美化插件及问题

    展开全文
  • selectpicker 默认值设置

    千次阅读 2018-06-05 15:59:00
    success: function (result) { var paraStatus = { "data": result, "liveSearch": false, "width": 140, ...
  • 它可对列表进行分组,同时也可禁用某些选择项。 先来看下插件的效果:   跟这个比起来,原来的select样式是不是弱爆了! 马上来武装我们的select吧: 1、先把js和css文件引用到网页里面去:
  • select标签如何设置默认选中的选项

    万次阅读 2018-09-22 16:30:23
    &lt;select class="form-control select2"...请选择会议室&lt;/option &gt; &lt;/select&gt; option其余的选项我是在后台传过来的,动态添加到select标签下边 func
  • Chosen 是一个支持jquery的...它可对列表进行分组,同时也可禁用某些选择项。 先来看下插件的效果: 跟这个比起来,原来的select样式是不是弱爆了! 马上来武装我们的select吧: 1、先把js和css文件引用到
  • select2源码上 2128 行的searchRemoveChoice方法里,他们把删除的那一的值放到了input标签里 所以把 this.$search.val(item.text); 修改为: // this.$search.val(item.text); setTimeout(functi...
  • select2各参数的设置相关笔记

    千次阅读 2018-10-23 09:22:28
     首先必须要引入中文包,且一定要放在select2.js之后 &lt;link type="text/css" rel="stylesheet" href="/css/select2.css"&gt; &lt;script type="text/...
  • angularjs ui-select如何设置默认选中值

    千次阅读 2017-02-21 13:58:25
    angularjs ui-select如何设置默认选中值,可以采用ng-model来设置,示例如下: ng-model="provinces.selected" theme="bootstrap" on-select="loadCitys($item, $model)"> <ui
  • 需求:下拉框在选中时能够在check-icon后面显示当前选中的排序,以及当超过最大可选数时不允许继续选中。 在antdesign组件里好像没有控制可选数的option,这点真的让人很奇怪诶~还得自己在onchange里写逻辑来控制...
  • 设置一个option,然后给该option设置成默认选择selected,然后把它隐藏,具体如下:<optionstyle="displty:none"selected>默认选择</option> 转载于:...
  • select2 插件添加选项 设置默认值

    千次阅读 2018-06-05 10:55:01
     $('selectid').select2({  ajax: { url: "https://api.github.com/search/repositories", dataType: 'json', data: function (params) {  var query = { //请求的参数, 关键字和搜索条件之类的 search...
  • 前言这个功能在网站中也很常见;下拉选择带搜索 基于之前的typeahead组件的基础上完善, 把过滤计算放在了computed ,其他逻辑也有所优化,代码更好理解效果图实现逻辑
  • SelectPage下拉分页选择插件

    千次阅读 2019-11-01 17:41:08
    1、官网资料https://terryz.oschina.io/selectpage/demo.html 2、使用方式(下面是搬砖) 1)、资源导入在网页上引用css样式、js脚本等文件 <!-- 基础环境引用说明 --> <!-- jQuery 基础脚本引用 -->...
  • select2 下拉选择框,有设置默认值(非全部),在加载数据时,改动后端返回数据,加了一条“全部”的下拉选择内容: list.unshift({'id':'','text':'全部'}); 问题分析: 首次切换到“全部”选项后,并未...
  • Visual Studio给了.net开发无数的方便,但是也带来了无数的坑=。= 今天就要又碰到一个坑,作为一名后端猿,前端水平实在令人捉鸡,所以开发的时候难免用现成的UI框架。...),引入layui后,layui会自动设置这个...
  • AngularJS 动态设置select的默认selected

    万次阅读 2016-03-29 15:43:58
    遇到一个问题,在控制器里设置了stafftype的默认值.controller('InfoStaffCtrl', function($scope, $rootScope, $state, $log,$ionicLoading, $timeout,Manpower) { //列表 $scope.search = {p:1,audittype:'',...
  • searchKey : searchKey_1 }, url : 'service/user/search', success : function(returnText) { /* window.parent.CloseMsgBox(); if (returnText.substring(0,1) == "N"){ window.parent.ShowMsgBox(returnText....
  • jquery bootstrap-select多选组件使用指南

    千次阅读 2019-03-13 15:44:59
    jquery bootstrap-select多选组件使用指南,包括bootstrap-select如何上手,核心配置说明,常用api方法演示,案例展示。
  • select实现多选

    千次阅读 2017-07-18 17:39:40
    选择select下拉框实现多选。<select multiple="multiple" ></select>
  • 1. 引入bootstrap-select的css,js 进入https://www.bootstrapselect.cn官网,下载bootstrap-select.min.css和bootstrap-select.min.js.同时引入bootstrap和juery <link href=...
  • 在使用select选择器的时候,因为里面内容是使用v-for循环出来的,选择依赖的值都是value,虽然在不同的数组中,但是如果value相同,两个选择器绑定的v-model里面输出的值也是相同的 所以在这里 需要value值不同,...
  • select2用法

    千次阅读 2019-04-17 10:52:26
    $("#e7").select2({ placeholder: “Search for a repository”, minimumInputLength: 3, ajax: { url: “https://api.github.com/search/repositories”, dataType: ‘json’, quietMillis: 250, data: functi...
  • select 详解

    千次阅读 2005-11-27 11:16:00
    SELECT 语句与其子句的详解 作者:不详 文章来源:来自 网络 点击数: 更新时间:2004-5-2

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,268
精华内容 10,907
关键字:

searchselect设置选择项