基于jquery-easyui框架下的下拉框赋值

关于赋值,个人把其分为两部分:动态赋值和静态赋值

(1)动态赋值(值来源于后台数据库)

    Jsp:

            企业类型:
           
                   

            

    Jquery:

            $(function(){
               $.ajax({
                   type:"post",
                   url:"/grain-supervise/companyBasicCredit/findCompType",//请求后台数据
                    dataType:"json",
                    success:function(json){
                    console.log(json);
                    $("#comptypeid").combobox({//往下拉框塞值
                            data:json,
                            valueField:"comptypeid",//value值
                            textField:"comptypename",//文本值
                            panelHeight:"auto"
                    })
                    }
            });

               });

        效果:

                    基于jquery-easyui框架下的下拉框赋值_第1张图片

(2)静态赋值(值是前端写死的)

        两种方式:

         ①   利用data-options属性
                a)     有默认值
               

    效果:

基于jquery-easyui框架下的下拉框赋值_第2张图片

b)     无默认值

                    data:[{'id':1,'text':'选项1'},{'id':2,'text':'选项2'}],
                    valueField:'id',
                    textField:'text',
                    panelHeight:'auto'

               ">

     效果:

基于jquery-easyui框架下的下拉框赋值_第3张图片

         ②  通过jquery进行赋值

                    Jsp:
待增加项:
       

 

                Jquery:

       a)     有默认值

$("#csadd").combobox({
        data:[{'value':'1','text':'国企'},{'value':'2','text':'私企','selected':true},{'value':'3','text':'外企'}],
        valueField:'value',
        textField:'text',
        panelHeight:'auto'

});

另外一种设定默认值的方式(接着上面的代码增加下面代码即可):

onLoadSuccess: function () {                    
                  var data = $('#status').combobox('getData');
                  var value=$('#status').combobox('getValue');
                  if(value==null||value==""){                  
                      if (data.length > 0) {                       
                         $('#status').combobox('select',data[0].value);                   
                               }                
                  }

    }

             效果:

                    基于jquery-easyui框架下的下拉框赋值_第4张图片

    b)    无默认值

    $("#csadd").combobox({
           data:[{'value':'1','text':'国企'},{'value':'2','text':'私企'}],
           valueField:'value',
           textField:'text',
           panelHeight:'auto'

             });

             效果:

                    基于jquery-easyui框架下的下拉框赋值_第5张图片




你可能感兴趣的:(jquery-easyui)