关闭

下拉框自动实现自动填充

922人阅读 评论(3) 收藏 举报
分类:

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

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

 

(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;
      });


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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:114776次
    • 积分:3875
    • 等级:
    • 排名:第8484名
    • 原创:144篇
    • 转载:2篇
    • 译文:1篇
    • 评论:1174条
    博客专栏