bootstrap 下拉选中查询

最新推荐文章于 2023-07-18 11:48:30 发布

转载最新推荐文章于 2023-07-18 11:48:30 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Steven5007/p/8472886.html

文章标签：

#json

本文介绍了一个用于资源查询的表单实现方法，通过下拉菜单选择资源类型如服务器、内存等，并利用JavaScript进行动态响应及参数处理。

 1 <div class="form-group">
 2                    <label class="col-lg-3 col-sm-2 control-label">资源种类</label>
 3                                     <div class="col-lg-9">
 4                                         <select id="item1" onchange="fn()" name="resource" 
 5                                            class="form-control m-bot15"     placeholder="请选择" style="width: 200px;">
 6                                                     <option value="">请选择</option>
 7                                                     <option value="服务器">服务器</option>
 8                                                     <option value="内存">内存</option>
 9                                                     <option value="存储">存储</option>
10                                                     <option value="其他">其他</option>            
11                                         </select>
12                                     </div>
13                                 </div>

function  fn(){
       var   name=$("#item1").find("option:selected").val(); 
           if(name !==null){
               resource=name;
           }
    };
//查询参数
function queryParams(params) {
            var search={};
            $.each($("#searchform").serializeArray(), function(i, field) {  
                   search[field.name] = field.value; 
            })
            var filters=JSON.stringify(search);
            var dataObj=eval("("+filters+")");
           var str={"page":this.pageNumber,
                    "pageSize":this.pageSize,
                    "filter":{"filters":[{"field":"resource","value":dataObj.resource}]},
                    "sort":[{"field":"name","dir":"ASC"}]}; 
            var baseData = JSON.stringify(str); 
             var param = {
                     models :baseData
                 }
            return param;
            }