`

dwr实现四级联动下拉框

    博客分类:
  • js
阅读更多
         勉强将四级联动给搞定了,之所以说勉强,是因为点击第二个下拉框的时候刷新了页面。因为之前有二级联动的实例,所以可以将四个下拉框分成两份。第一个跟第二个联动,第三个跟第四个联动,当然这里用dwr实现没问题。问题就在第二个跟第三个的联动,起初我觉得问题不大,只要加一个方法就可以了,中间还是出现了很多疑问:

        1、 DWRUtil.addOptions(situs, situses, "goodsId", "goodsName"); 起初在取值的时候觉得动态添加到下拉框的值应该是可以用document对象进行取值的,但不知道为什么取不到?貌似动态添加表格时可以取到js中添加的值:

//添加复选框对象
  var newNameTD0=newTR.insertCell(0);
  newNameTD0.setAttribute("align","center");
  newNameTD0.innerHTML ='<td align="center" colspan="2" height="22"><input type="checkbox" id="oneCheck" name="oneCheck"  onclick=""/></td><td><input type="hidden" id="Id" name="pkId" value="" /></td><td><input type="hidden" id="add" name="addScore" value="" /></td>';

       2、第二个疑问是我从来没碰到过也没不知道怎么实现的。四级联动jsp代码如下,不知道实现,所以这里的代码没改,原样如下:

     <td align="right">产品大类</td>
                    <td>
                    <select name="selectBig" id="selectBig" onchange="onloadSmall('selectBig','selectSmall');" style="width:150px">
                     <option value="null"></option>
                     <s:iterator value="#request.bigs" id="big">
                      <option value="${big.goodsId }">${big.goodsName }</option>
                     </s:iterator>
                    </select>
                    </td>
                    <td>产品小类</td>
                    <td>
                     <select name="selectSmall" id="selectSmall" style="width:150px" onchange="onloadProduct();">
                      <option value=""></option>
                     </select>
                    </td>
                   
           <td align="right">产品名称 </td>
           <td>
           <select id="goodsSelect" style="width:180px" onchange="onType('goodsSelect','goodsType')">
            <option value="null"></option>
            <s:iterator value="#request.goodses" id="g">
              <option value="${g.goodsId }~!${g.goodsType }~!${g.goodsName }~!${g.unitId }~!${g.unitName }">${g.goodsName }</option>
            </s:iterator>
           </select>
           </td>
           <td align="right">型&nbsp;&nbsp;&nbsp;&nbsp;号 </td>
           <td >
               <select id="goodsType" style="width:180px">
               </select>
           </td>

在我看来凡是用标签iterator 遍历的都是action中取出来的,大类是在前面一个请求的时候值就可以取出来了,但是后面的下拉框取值必须得在前一个点击的时候才能去取值。那么就意味着上面的商品名称是能用标签取值了,只能用这个DWRUtil.addOptions(situs, situses, "goodsId", "goodsName"); 这样取值了。但问题的关键是第三个下拉框的值是通过小类别的id取值的,那么第二个下拉框在反复取值时也可以这样获取值吗?:

var smaillId = window.document.getElementById("selectSmall").value;

var small = window.document.getElementById("selectSmall");
smallName = small.options[small.selectedIndex ].innerText;

如果能我想后面应该就简单了,那么我现在做的就变得复杂多了。但同时我又感觉今天做的这个给我一个很好的启发,把整个要实现的功能看做整体,从整体中还可以分块来做,分成的小块是很容易的。四级联动可以看成是两个两级联动,中间第二级与第三极经过了action,取值稍微复杂点。在我看来至少解决问题的思路还是挺好的。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics