级联下拉框的解决方案(一)

 看了一个开源的标签库AjaxTag(http://ajaxtags.sourceforge.net/index.html)，提供几个比较简单的应用。我测试下了DropDownSelect应用：
 1、首先当然是看安装文档（http://ajaxtags.sourceforge.net/install.html），应该没什么负责的，我要说的是第3步，也是比较重要的一步，创建服务端的控制程序。这部分也就是AjaxTag的原理，AjaxTag是通过服务器端的servelt生成XML文件，当然也可以是其他的服务器端技术只要是能生成格式良好的XML文件就可以了，文件格式如下图：

 2、我们的例子就是通过选择制造商可以动态的产生该制造商的车型。下面是需要的一些类文件：
 Car类:包含两个String类型属性make,model分别指制造商和车型.
 CarService类如下：

 public class CarService {

  static final List cars = new ArrayList();
  static {
    cars.add(new Car("Ford", "Escape"));
    cars.add(new Car("Ford", "Expedition"));
    cars.add(new Car("Ford", "Explorer"));
    cars.add(new Car("Ford", "Focus"));
    cars.add(new Car("Ford", "Mustang"));
    cars.add(new Car("Ford", "Thunderbird"));
    cars.add(new Car("Honda", "Accord"));
    cars.add(new Car("Honda", "Civic"));
    cars.add(new Car("Honda", "Element"));
    cars.add(new Car("Honda", "Ridgeline"));
    cars.add(new Car("Mazda", "Mazda 3"));
    cars.add(new Car("Mazda", "Mazda 6"));
    cars.add(new Car("Mazda", "RX-8"));
  }
  public CarService() {
    super();
  }
 /*该方法在servlet被调用*/
  public List getModelsByMake(String make) {
    List l = new ArrayList();
    for (Iterator iter = cars.iterator(); iter.hasNext();) {
      Car car = (Car) iter.next();
      if (car.getMake().equalsIgnoreCase(make)) {
        l.add(car);
      }
    }
    return l;
  }
  public List getAllCars() {
    return cars;
  }
}

DropdownServlet类：

     String make = request.getParameter("make");
     CarService service = new CarService();
     //得到该make的所有model
     List list = service.getModelsByMake(make);
   //这就是Helper类，能生成像上面的xml文件
     return new AjaxXmlBuilder().addItems(list, "model", "make").toString();

4、不要忘记了在web.xml中加上映射DropdownServlet

 <servlet>
    <servlet-name>dropdown</servlet-name>
    <servlet-class>qiya.deng.ajaxtag.DropdownServlet</servlet-class>
    <load-on-startup>2</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>dropdown</servlet-name>
    <url-pattern>/dropdown.view</url-pattern>
  </servlet-mapping>

5.下面就是JSP部分(需要JSTL和EL)：

<c:set var="contextPath" scope="request">${pageContext.request.contextPath}</c:set>
<form id="carForm" name="carForm">
  <fieldset>
    <legend>Choose Your Car</legend>

    <div>
      <img id="makerEmblem"
           src="<%=request.getContextPath()%>/img/placeholder.gif"
           width="76" height="29" />
    </div>
    <label for="make">Make:</label>
    <select id="make">
      <option value="">Select make</option>
      <option value="Ford">Ford</option>
      <option value="Honda">Honda</option>
      <option value="Mazda">Mazda</option>
      <option value="dummy">Dummy cars</option>
    </select>
    <label for="model">Model:</label>
    <select id="model" disabled="disabled">
      <option value="">Select model</option>
    </select>
  </fieldset>
</form>
<script type="text/javascript">
function showMakerEmblem() {
  var index = document.forms["carForm"].make.selectedIndex;
  var automaker = document.forms["carForm"].make.options[index].text;
  var imgTag = document.getElementById("makerEmblem");
  if (index > 0) {
    imgTag.src = "<%=request.getContextPath()%>/img/" + automaker.toLowerCase() + "_logo.gif";
  }
}
function handleEmpty() {
  document.getElementById("model").options.length = 0;
  document.getElementById("model").options[0] = new Option("None", "");
  document.getElementById("model").disabled = true;
}
</script>
<ajax:select
  baseUrl="${contextPath}/dropdown.view"
  source="make"
  target="model"
  parameters="make={make}"
  postFunction="showMakerEmblem"
  

emptyFunction="handleEmpty" />
注意到form里面其实没什么不一样的，就是最后那段的<ajax:select/>,baseUrl就是服务器端处理的Handler,source是关联的源，model是被关联的；parameter是传个servlet的参数，可以有多个用逗号隔开；postFunction,emptyFunctuion就是上面的两个JavaScript.详细的可以看 http://ajaxtags.sourceforge.net/usage.html。

 经过简单的修改，我们也可以把这个应用到Struts中。那就后续吧^_^...