JS 动态添加列表框项效果代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS 动态添加列表框项效果代码

Javascript: js中几种去掉字串左右空格的方法; 判断两种颜色值是否为相似颜色; 关于键盘事件中keyCode、which和charCode 的兼容性测试; 提高 DHTML 页面性能; 漂亮的Slider效果类终于封装成功; 注释的艺术——JS里直接写HTML，无需转义; 用javascript实现无刷新更新数据的详细步骤 asp; Windows Live的@live.com域名注册漏洞利用代码; 只能输入小于最大数且是正整数的脚本; 破除网页鼠标右键被禁用的绝招大全; escape、encodeURI、encodeURIComponent等方法的区别比较; URL编码转换,escape() encodeURI() encodeURIComponent(); 使用javascript访问XML数据的实例; ie和firefox中img对象区别的困惑; utf8的编码算法转载; Javascript六种风格的时间显示方式; JavaScript实现禁止后退的方法; 从javascript语言本身谈项目实战; 通用于ie和firefox的函数 GetCurrentStyle (obj, prop); javascript实现划词标记划词搜索功能修正版

No. « ‹ 38 39 40 41 › »

技术文章搜索

关键字

Javascript 中的 JS 动态添加列表框项效果代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 346 ::

收藏到网摘: n/a

javascript dom 操作详解 js加强 Javascript 事件流和事件绑定

动态添加列表框项，不错的效果，需要用的朋友可以参考下。

点击运行可以看到效果:

<table width="200" border="0" cellspacing="0">
<tr>
<td colspan="3"><span id="selectmsg">*请选择1-3个知识点.</span></td>
</tr>
<tr>
<td><select name="selectleft" size="10" id="selectleft">
<option value="1">1213123123</option>
<option value="2">2123123123</option>
<option value="3">3213123213</option>
<option value="4">4123213213</option>
<option value="5">5213123213</option>
<option value="6">6213123213</option>
</select></td>
<td>
<input type="button" id="addto" class="operateBtn" value=" " />
<input type="button" id="moveback" class="operateBtn" value=" " />
</td>
<td><select name="selectright" size="10" id="selectright">
</select></td>
</tr>
</table>
<script type="text/javascript">
var addTo = document.getElementById("addto");
var moveBack = document.getElementById("moveback");
var selectLeft = document.getElementById("selectleft");
var selectRight = document.getElementById("selectright");
var count = 0;
addTo.onclick = addOption;
moveBack.onclick = delOption;
//这个函数检验传入的值是否在有边出现过！
function hasOption(str){
for(var i=0;i<document.getElementById("selectRight").options.length;i++){
if(document.getElementById("selectRight").options.value==str){
return false;
}
}
return true;
}
function addOption(){
var nowIndex = document.getElementById("selectRight").options.length; //右边的下一个索引
var selectIndex = document.getElementById("selectLeft").options.selectedIndex; //做边被选种项索引
var selectText = document.getElementById("selectLeft").options[selectIndex].text; //被选种项文本
var selectValue = document.getElementById("selectLeft").options[selectIndex].value; //被选种项值
if(selectIndex!=-1){
if(!(hasOption(selectValue))){ //如果选了一项且右边没有，执行
if(count<3){
var newoption = new Option(selectText,selectValue,false,false);
document.getElementById("selectRight").options[nowIndex] = newoption;
count+=1;
document.getElementById("selectmsg").innerHTML="*你还可以选择"+(3-count)+"个知识点";
}else
document.getElementById("selectmsg").innerHTML="<font color=red>*温馨提示,你只能选择三项！</font>";
}else
document.getElementById("selectmsg").innerHTML="<font color=red>*温馨提示,不能重复选择！</font>";
}
}
function delOption(){
var selectIndex = document.getElementById("selectRight").options.selectedIndex;
if(selectIndex!=-1){
document.getElementById("selectRight").options[selectIndex] = null; //清空选种项
count-=1;
document.getElementById("selectmsg").innerHTML="*你还可以选择"+(3-count)+"个知识点";
}
}
function hasOption(str){
var tmp=false;
for(i=0;i<count;i++){
if(str==document.getElementById("selectRight").options[i].value){
tmp=true;
break;
}
else
tmp=false;
}
return tmp;
}
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript dom 操作详解 js加强 Javascript 事件流和事件绑定

Javascript 中的 JS 动态添加列表框项效果代码

评论 (0) All