js中嵌入jstl标签的实战 : 需求

从Controller传入页面的参数是一个superPojo对象，该对象包含一个产品对象：Product product，一个库存集合对象：List<Sku> skus，一个颜色集合对象：Map<Long,String> colors，对象关系大致如下：

public class SuperPojo{    Product product; // 产品    List<Sku> skus; // 库存集合    Map<Long,String> colors // 该产品所有颜色集合}

分析superPojo对象的属性 ： 一个产品对象旗下有多个库存，对应了superPojo里的库存集合对象skus，一个产品旗下有多种颜色，对应了superPojo里的颜色集合对象colors(该集合去除了库存中颜色重复的问题)

返回页面 : product.jsp

页面核心代码如下:

第一步 ： 加载product.jsp页面后显示所有颜色

<div class="dt">选择颜色：</div><div class="dd" id="colors"><c:forEach items="${superPojo.colors }" var="color">    <div class="item" onclick="colorToRed(this,'${color.key}')">        <b></b>        <a href="javascript:;" title="${color.value }" >            <img data-img="1"                src="/images/53f44cc2N0b714cb2_002.jpg"                alt="灰色三件套" height="25" width="25">            <i>${color.value }</i>        </a>    </div></c:forEach></div>

第二步 ： 加载product.jsp页面后显示所有尺码(目前为空)

<div class="dt">选择尺码：</div><div class="dd" id="sizes"></div>

第三步 ： 加载product.jsp页面后显示对应价格(目前为空)

<div class="dt">价&nbsp;格：</div><div class="dd">    <strong class="p-price" id="bbs-price"></strong>    <a id="notice-downp"  href="javascript:;" target="_blank">(降价通知)</a></div>

核心因素 ： jstl标签是在客户端返回给页面时就已经执行了，而js以及html代码是在客户端浏览器中解析后才执行，执行顺序：先执行jstl标签，后执行html和js代码

第一卷 : 点击颜色加载对应的尺码

http://blog.csdn.net/richard_wangqianjin/article/details/78132742

第二卷 : 点击尺码加载对应的价格

http://blog.csdn.net/richard_wangqianjin/article/details/78132748

第三卷 : 首次点击颜色时默认选择该颜色对应的第一个尺码并显示价格

http://blog.csdn.net/richard_wangqianjin/article/details/78132750

第四卷 : 首次加载进入该页面时默认选择第一个颜色及该颜色对应的尺码并显示价格

http://blog.csdn.net/richard_wangqianjin/article/details/78132756