<select>二级联动价格策略+js的eval()

junjun19860702

eval()函数，曾经自己并不觉得怎么样，但是项目中遇到一个需求，被迫使用，感觉确实很强大，记下来，忘了了看看！
 
需求： 1)         省内价格可用精确到地市（即，区号），省外价格只精确到省。（产品表中的产品集合将精确到地市，即一万多产品；非本省操作时，将只显示省名称，实际操作地市产品）。
         2)         产品查询：（查询条件）
               a)         地区（省内选择地市，省外选择省份）
               b)         面值
               c)         运营商
综上：1.jsp页面需要一个二级联动<select>，选择省内时查出当前工号对应省份的所有
        城市，例如：省内(黑龙江)-->查出哈尔滨、齐齐哈尔、大庆等。
      2.选择省外，查出T_AREA表中所有的省份，例如：黑龙江、辽宁、河南等。
 
一、ServiceImpl中方法
/* 查询所有省号、所有省份名称--去掉重复的,此方法hibernate返回一个Object数组，对distinct 封装了 * @date 2011-5-21 下午04:31:26 */@Overridepublic List<TArea> getProvinceAndCodeList() {String hql = "select distinct t.provinceCode,t.province from TArea t";List<TArea> list = queryByHql(hql);return list;}/* 根据区号，查询当前区号对应省内的所有市 集合 * @date 2011-5-21 下午04:57:00 */@Overridepublic List<TArea> getProvinceListByAreaCode(String areaCode) {String sql = "";if(null != areaCode && !"".equals(areaCode)){sql = "select * from t_area t where t.province_code=" +"(select t1.province_code from t_area t1 where t1.area_code='"+areaCode+"')";} List<TArea> list = queryBySql(sql);return list;} 
 
二、struts2的Action两个方法中查询出
      
 
/** * 获得当前工号省内的所有--选择的省内 * @author mengxianjun * @date 2011-5-23 上午09:28:14 */public void getAllCity() {try{String area_code = ConfigCtrl.getConfigValue("area_code");//配置表，获得默认区号tAreaList = areaService.getProvinceListByAreaCode(area_code);//当前工号所在省的所有市集合this.getResponse().setCharacterEncoding("UTF-8");PrintWriter out = this.getResponse().getWriter();JSONArray myjsonObj = JSONArray.fromObject(tAreaList);out.println(myjsonObj.toString());out.flush();out.close();}catch( Exception e ){log.error("PriceStrategyAction's method getAllCity ",e);}}/** * 获得所有省--选择的省外 * @author mengxianjun * @date 2011-5-23 上午09:28:14 */public void getAllProvince() {try{allProvinceList = areaService.getProvinceAndCodeList();//所有省集合this.getResponse().setCharacterEncoding("UTF-8");PrintWriter out = this.getResponse().getWriter();JSONArray myjsonObj = JSONArray.fromObject(allProvinceList);out.println(myjsonObj.toString());out.flush();out.close();}catch( Exception e ){log.error("PriceStrategyAction's method getAllProvince ",e);}} 
 三、jsp页面给<select>添加onchange事件，对应省内、省外变换<option>
<script type="text/javascript">function getAllCityOrProvince(){if( $("#Area_a").val()=='no' ){$("#Area_b").empty();//清空列表$("<option></option>").val("no").text("    ").appendTo($("#Area_b"));}/*省内*/if( $("#Area_a").val()=='nei' ){$("#Area_b").empty();//清空列表$.post("priceStrategy_getAllCity",'',function(data){$.each(eval(data),function(i){$("<option></option>").val(eval(data).areaCode).text(eval(data).city).appendTo($("#Area_b"));});});}/*省外*/if( $("#Area_a").val()=='wai' ){$("#Area_b").empty();//清空列表$.post("priceStrategy_getAllProvince","",function(data){//alert(data);$.each(eval(data),function(i){$("<option></option>").val(eval(eval(data))[0]).text(eval(eval(data))[1]).appendTo($("#Area_b"));});//第二种方法，纯js循环输出//alert(data);//alert(eval(data).length);/*for( var i=0; i<eval(data).length; i++ ){var obj1 = eval(eval(data))[0];var obj2 = eval(eval(data))[1];$("<option></option>").val(obj1).text(obj2).appendTo($("#Area_b"));}*/});}}</script> 
 
四、jsp页面，表单内容
<s:form id="form1" action="" target="main"><table border=1 width="100%"><tr><td colspan="3">查询操作</td></tr><tr><td>地区:</td><td><select id="Area_a" name="Area_a" size="1" onchange="getAllCityOrProvince()"><option value="no">==请选择==</option><option value="nei">省内</option><option value="wai">省外</option></select><select id="Area_b" name="Area_b" size="1"><option value="no">    </option></select></td><td><span id="textArea"></span></td></tr><tr><td>面值:</td><td><input type="checkbox" id="selectALLMoney" />全选<input type="checkbox" name="money" value="1"/>1  <input type="checkbox" name="money" value="3"/>3  <input type="checkbox" name="money" value="5"/>5  <input type="checkbox" name="money" value="10"/>10  <input type="checkbox" name="money" value="20"/>20  <input type="checkbox" name="money" value="30"/>30  <input type="checkbox" name="money" value="50"/>50  <br><input type="checkbox" name="money" value="100"/>100  <input type="checkbox" name="money" value="200"/>200  <input type="checkbox" name="money" value="300"/>300  <input type="checkbox" name="money" value="500"/>500  <input type="checkbox" name="money" value="1000"/>1000  </td><td><span id="textMoney"></span></td></tr><tr><td>运营商:</td><td><select id="operatorsCode" name="operatorsCode" size="1"><option value="all">全部</option><option value="40">移动</option><option value="41">联通</option><option value="42">电信</option></select></td><td> </td></tr><tr><td></td><td><input type="button" value=" 查询 "  />         <input type="button" value=" 重置 " /></td><td> </td></tr></table><c:choose><c:when test="${ pageHelper != null }"><table border=1 width="100%"><tr><td colspan="3">批量操作</td></tr><tr><td>价格：</td><td><input type="radio" id="pricesMarks" name="updateType" value="prices" checked="checked" ><label for="pricesMarks">价格</label> <input type="radio" id="ratioMarks" name="updateType" value="ratio" ><label for="ratioMarks">比率 </label><input type="text" id="price" name="price"></td><td><span id="textPrice"></span></td></tr><tr><td colspan="2"><input type="button" id="batchUpdate" value="批量修改" >        <input type="button" id="allUpdate" value="全部修改" ></td><td><span id="textBatchUpdate"></span></td></tr></table><table border=1 width="100%"><tr><td><display:table id="myList" name="pageHelper"  requestURI="priceStrategy_querAllPriceStrategy" sort="list" size="count">  <display:column title="<input type='checkbox' id='selectALL' onclick=\"checkAll(this,'checkboxProductTypeNum')\"/\>">  <input type="checkbox" name="checkboxProductTypeNum" value="${ myList.typeNum }"/>  <input type="hidden" name="hiddenTypeNum" value="${ myList.typeNum }"/>  </display:column>  <display:column property="typeName" title="价格策略名称"/>  <display:column property="createDate" title="创建时间" />  <display:column title="操作">  <a href="priceStrategy_openUpdatePriceStrategy?typeNum=${ myList.typeNum }" target="main">修改策略</a>||  <a href="priceStrategy_showDetailPriceStrategy?typeNum=${ myList.typeNum }" target="main">查看详情</a>  </display:column></display:table></td>   </tr></table></c:when><c:otherwise></c:otherwise></c:choose></s:form>