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

eval()函数，曾经自己并不觉得怎么样，但是项目中遇到一个需求，被迫使用，感觉确实很强大，记下来，忘了了看看！

 

需求： 1)         省内价格可用精确到地市（即，区号），省外价格只精确到省。（产品表中的产品集合将精确到地市，即一万多产品；非本省操作时，将只显示省名称，实际操作地市产品）。

         2)         产品查询：（查询条件）

               a)         地区（省内选择地市，省外选择省份）

               b)         面值

               c)         运营商

综上：1.jsp页面需要一个二级联动<select>，选择省内时查出当前工号对应省份的所有

        城市，例如：省内(黑龙江)-->查出哈尔滨、齐齐哈尔、大庆等。

      2.选择省外，查出T_AREA表中所有的省份，例如：黑龙江、辽宁、河南等。

 

一、ServiceImpl中方法

	/* 查询所有省号、所有省份名称--去掉重复的,此方法hibernate返回一个Object数组，对distinct 封装了
	 * @date 2011-5-21 下午04:31:26
	 */
	@Override
	public 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
	 */
	@Override
	public 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)[i].areaCode).text(eval(data)[i].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)[i])[0]).text(eval(eval(data)[i])[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)[i])[0];
					var obj2 = eval(eval(data)[i])[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">&nbsp;&nbsp;&nbsp;&nbsp;</option>
				</select>
			</td>
			<td><span id="textArea"></span></td>
		</tr>
		<tr>
			<td>
				面值:
			</td>
			<td>
				<input type="checkbox" id="selectALLMoney" onclick="checkAll(this,'money')"/>全选
				<input type="checkbox" name="money" value="1"/>1 &nbsp;
				<input type="checkbox" name="money" value="3"/>3 &nbsp;
				<input type="checkbox" name="money" value="5"/>5 &nbsp;
				<input type="checkbox" name="money" value="10"/>10 &nbsp;
				<input type="checkbox" name="money" value="20"/>20 &nbsp;
				<input type="checkbox" name="money" value="30"/>30 &nbsp;
				<input type="checkbox" name="money" value="50"/>50 &nbsp;<br>
				<input type="checkbox" name="money" value="100"/>100 &nbsp;
				<input type="checkbox" name="money" value="200"/>200 &nbsp;
				<input type="checkbox" name="money" value="300"/>300 &nbsp;
				<input type="checkbox" name="money" value="500"/>500 &nbsp;
				<input type="checkbox" name="money" value="1000"/>1000 &nbsp;
			</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>&nbsp;</td>
		</tr>
		<tr>
			<td>
				
			</td>
			<td>
				<input type="button" value=" 查询 "  onclick="queryPrice()"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="button" value=" 重置 " onclick="resetQueryPrice()"/>
			</td>
			<td>&nbsp;</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" onclick="pricesMarksOrRatioMarks()"><label for="pricesMarks">价格</label> 
						<input type="radio" id="ratioMarks" name="updateType" value="ratio" onclick="pricesMarksOrRatioMarks()"><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="批量修改" onclick="batchUpdateMethod()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="button" id="allUpdate" value="全部修改" onclick="allUpdateMethod()">
					</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>