下拉框自动实现自动填充

原创 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;
      });


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

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

相关文章推荐

js根据输入内容自动填充下拉框

这是AJAX的典型应用之一,即根据用户在输入框内输入的内容来搜索数据库,然后把内容显示出来,当然不一定非要显示在下拉框中,也可以放在其它的地方,我们这里只是把搜索到的内容填充到下拉框中,以便用户精确定...

jquery动态实现填充下拉框

项目需要实现一个功能 当点下拉框时动态加载后台数据。 这是后台数据 protected void doPost(HttpServletRequest request, HttpServletRespo...

文本框(Textbox)和下拉框(Combobox)自动联想功能的实现

怎样使自己程序中的文本框或下拉框具有像百度和Google那样的自动联想功能?微软的TextBox和Combobox控件为我们提供了简便方法。 首先需要学习TextBox(或Combobox)的两个属性...

下拉框实现的自动筛选

  • 2014年07月22日 10:28
  • 25.23MB
  • 下载

Jquery实现自动提示下拉框

Jquery实现自动提示下拉框 这几天自己在看Jquery,真是越来越喜欢了。张子秋博客里面写的这个系列很不错,在这表扬一下。看了那么多的东西,毕竟最后要转化成实际的成果才行,要不,就是白看了,...

文本框(Textbox)和下拉框(Combobox)自动联想功能的实现

怎样使自己程序中的文本框或下拉框具有像百度和Google那样的自动联想功能?微软的TextBox和Combobox控件为我们提供了简便方法。 首先需要学习TextBox(或Combobox)的两个属...
  • dxd0128
  • dxd0128
  • 2013年08月15日 09:49
  • 1377

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

我本来的目的:是想实现鼠标移动到select下拉框上,下拉框自动展开。 原先思路:使用onmouseover()鼠标事件调用一个openSelect()函数,函数中调用onclick()方法,以为就...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:下拉框自动实现自动填充
举报原因:
原因补充:

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