浏览 5186 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-05-13
最后修改:2011-05-13
jQuery实现在左边双击某一项时添加到右边,右边时添加到左边: 部分修饰代码简略: <table style="..."> <tr> <td colspan="2" valign="top" width="47%"> <select multiple="multiple" id="uncountryTable" name="uncountryTable" style="height:300px;width:245px;"> </select> </td> <td align="center"> ... </td> <td colspan="2" valign="top" width="47%"> <select multiple="multiple" id="countryTable" name="countryTable" style="height:300px;width:245px;"> </select> </td> </tr> </table> 以左边为例: 刚开始我的思路是这样的: 当左边select变化时,如果有一项选中,那么当它被双击时就执行相应的操作;但当实施时才发现这样根本不可行,代码如下: //jQuery("#uncountryTable").change(function(){ //jQuery("#uncountryTable option").each(function(){ //if(jQuery(this).attr("selected") == true){ //jQuery(this).dblclick(function(){ //alert(111111); //var option = "<option value='"+jQuery(this).val()+"'>"+jQuery(this).text()+"</option>"; //jQuery("#countryTable").append(option); //jQuery(this).remove(); //}); //} //}); //}); 其实一直到判断选中的这一步都是正确的,经测试此时也确实可以alert出相应选中项的值 (多选下拉框获取选中文本、value: 也可以用change方法) //jQuery("#uncountryTable").change(function(){ //jQuery("#uncountryTable option").each(function(){ //if(jQuery(this).attr("selected") == true){ //alert(jQuery(this).val()+":"+jQuery(this).text()); //} //}); //}); 但是一到dblclick(fn)方法这步就有问题了,连测试的111111都不弹出,几经测试都无效果,无奈只得另谋它路。
在网上搜了一下,发现一个哥们用JS写的同样效果代码(下面),看了之后才发现原来自己想得太复杂了,正确思路应该是这样的: 当双击select的时候,触发dblclick(fn)事件,如果某一项被选中(你双击某一项,它就肯定被选中啦),就将其添加到右边,这样就可以实现效果,哈哈。 上代码: jQuery(document).ready(function() { jQuery("#uncountryTable").dblclick(function(){ jQuery("#uncountryTable option:selected").each(function(){ var option = "<option value='"+jQuery(this).val()+"'>"+jQuery(this).text()+"</option>"; jQuery("#countryTable").append(option); jQuery(this).remove(); }); }); }); 很简单的东西,换下思路就实现了,因此,以后遇到问题时,就先问下自己,是不是我想得太复杂了,哈哈......
那哥们效果+代码(主要部分): <head> <script> function removeItem(){ var sltSrc=document.getElementById('sltSrc'); var sltTarget=document.getElementById('sltTarget'); for(var i=0;i<sltSrc.options.length;i++) { var tempOption=sltSrc.options[i]; if(tempOption.selected){ sltSrc.removeChild(tempOption); sltTarget.appendChild(tempOption); } } } </script> </head> <body> <select ondblclick="removeItem();" id="sltSrc" multiple="true"> <option value="a">srcA</option> <option value="b">srcB</option> <option value="c">srcC</option> </select> <select ondblclick="addItem();" id="sltTarget" multiple="true"> <option value="a">targetA</option> <option value="b">targetB</option> <option value="c">targetC</option> </select> <div id="showInfo"></div> <input type="button" value="showSelectOptions" onclick="showSelectOptions();"/> </body> 链接:http://www.cnblogs.com/hanxianlong/archive/2009/03/31/1426095.html
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |