下拉框自动实现自动填充

原创 2016年05月31日 14:48:46

         在我们平台中有这样的一个功能,设置了数据字典就可以使下拉框自动选择数据的类型,但是有一点不足的地方就是没有默认值,现在我要做的就是如何实现这个有默认值的下拉框。

还是有日期来举例。如图所示功能:

 

(1)esayui-combobox方法:

 在页面设置一个esayui-combobox控件,通过设置data-options="valueField: 'id', textField: 'text'来设置我们想要的数据和顺序,通过'selected':true来设置默认值。

    <input id="MONTH" name="MONTH" class="easyui-combobox" data-options="valueField: 'id', textField: 'text',    <pre class="html" name="code">                       data:[{ 'id':'0','text':'01','selected':true},
                             { 'id':'1','text':'02'},
                             { 'id':'2','text':'03'},
                             { 'id':'3','text':'04'},
                             { 'id':'4','text':'05'},
                             { 'id':'5','text':'06'},
                             { 'id':'6','text':'07'},
                             { 'id':'7','text':'08'},
                             { 'id':'8','text':'09'},
                             { 'id':'9','text':'10'},
                             { 'id':'10','text':'11'},
                             { 'id':'11','text':'12'},]" />
 

 

(2)select option方法

esayui-combobox方法也有点缺陷,没有灵活能默认当月,只能在代码中写死一个月份。所有使用传统方法——select option方法去改造了下。

 <select id="MONTH" name="MONTH" style="width: 150px; height: 23px; border: 1px solid #A6D6EC">
                             <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>


然后在用js设置一下默认值。

     

<pre class="html" name="code">$(document).ready(function () {
        var myDate = new Date();
        var thisYear = myDate.getFullYear();
        var backYear = (thisYear - 8);
        var option = null;
        thisYear = thisYear + 5;
        for (l = backYear ; l < thisYear; l++) {

            document.getElementById("YEAR").options.add(new Option(l, l));
        }
//年份
        document.getElementById("YEAR").value = (thisYear - 5);

//月份
        var thisMonth = myDate.getMonth() + 1;
        var m = thisMonth 
        m = m < 10 ? '0' + m : m;
        //var m = thisMonth + "月";
       // alert(thisMonth)
        document.getElementById("MONTH").value = m;
      });


这样就解决我们平台的下拉框默认值的问题。

版权声明:本文为博主原创文章,未经博主允许不得转载。

关于javaScript实现select下拉框自动展开

我本来的目的:是想实现鼠标移动到select下拉框上,下拉框自动展开。 原先思路:使用onmouseover()鼠标事件调用一个openSelect()函数,函数中调用onclick()方法,以为就...
  • SUN_song520
  • SUN_song520
  • 2015年12月27日 13:46
  • 18241

网页中下拉列表框自动展开的方法

..为简化用户操作,希望鼠标悬停在下拉列表框上时,能自动展开。查了一下select的属性,没有相关的操作。最后找了一个变通的办法,代码如下:126163163net163vip就是让鼠标悬停后,显示的...
  • minidick
  • minidick
  • 2007年12月13日 21:50
  • 5936

TextBox自动匹配,自动完成,AutoCompleteCustomSource

利用textbox的autocomplete系列属性,达到自动匹配、自动完成的效果~ 缺点:不能根据拼音匹配中文。 做法,简单的demo: string[] strComplete=...
  • luoyanqing119
  • luoyanqing119
  • 2014年09月30日 16:02
  • 5458

select下拉列表框自动展开

  • Leolu007
  • Leolu007
  • 2012年08月23日 18:55
  • 5848

C#自动填写用户名、密码,自动提交登录网页(你懂的!)

在学校上网是通多Dr.com网页的形式登录, 由于账号流量限制,一个账号很快就用完了,幸运的是我们手上有一个EXCEl表,里面的账号足够多。但是每次用的时候都要打开表查找一个可用的账号,不仅耗时,而...
  • dylanzr
  • dylanzr
  • 2015年05月07日 20:35
  • 6773

c#TextBox输入框自动提示、自动完成、自动补全功能

功能概览相关属性TextBox.AutoCompleteCustomSource 属性获取或设置当 TextBox.AutoCompleteSource 属性设置为 [CustomSource] 时要...
  • testcs_dn
  • testcs_dn
  • 2015年04月26日 22:05
  • 23476

使用jQuery和Ajax自动填充选择框(select)

前言:大家好,我是一名正在实习的前端实习生,今天在做项目的时候,遇到了一个没有遇到过的问题,就是从后台获取到的数据要自动填充到选择框内,并且选择框是个select级联(一个选择框改变,另一个也会改变,...
  • Gemini_llw
  • Gemini_llw
  • 2017年08月01日 16:45
  • 413

如何让select下拉框随着内容改变大小

111      22222      33333333      44444444444      555555555555555                function r...
  • u012992462
  • u012992462
  • 2015年03月30日 10:59
  • 2749

C# HtmlSelect控件绑定问题

具体问题是这样:后台写了一个方法,返回值为:List GetPartnerList(int partnertype),Partner是自定义的实体类,然后前台HtmlSelect控件绑定,原本这个问题...
  • u012633310
  • u012633310
  • 2013年11月30日 15:01
  • 559

c# 自动填充的ComboBox,可以展开ComboBox并高亮选中的内容。

public partial class ACComboBox : System.Windows.Forms.ComboBox{       private bool autoComplete;   ...
  • HJPror
  • HJPror
  • 2011年02月25日 18:20
  • 3370
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:下拉框自动实现自动填充
举报原因:
原因补充:

(最多只允许输入30个字)