tion %> 山东来一把麻将群
當前位置:首頁 > 建站知識

JS 動態添加列表框項效果代碼

更新時間:2010.02.04 瀏覽次數:
<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>
烟台麻将规则 一定牛河北十一选五 重庆时时开彩结果历史 湖南麻将多少张 足球球足球球探比分 脱兔电竞比分网1005脱兔电竞比分网 亿牛策略配资 妈祖日本女优剧全集下载 澳洲幸运5开奖体育彩查询 竞彩比分4串1的规定 中国男篮巴西队比分 浙江快乐彩 河北十一选五开奖查 皇冠比分99822 足球 澳客网北单比分直播 香港三级片叶玉卿 广西双彩开奖结果公告