js 操作select...
时间：2010-08-18 来源：recruits
<!-- 1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 7设置select中value="paraValue"的Item为选中 8得到select的当前选中项的value 9得到select的当前选中项的text 10得到select的当前选中项的Index 11清空select的项 --> <mce:script language="javascript"><!-- var errCode = -1; <!-- 1检查是否存在某项 --> function checkValue(secObj,itemValue){ for(var i=0; i<secObj.options.length; i++){ if(secObj.options[i].value == itemValue){ return i; } } return errCode; } <!-- 2添加一个选项 --> function addItem(secObj,itemText,itemValue){ var retCode = checkValue(secObj,itemValue); if(retCode == errCode){ var newOp = new Option(itemText,itemValue); secObj.options.add(newOp); alert("add new option '"+itemText+"' successful!"); } } <!-- 3根据值删除一个选项 --> function delItem(secObj,itemValue){ var retCode = checkValue(secObj,itemValue); if(retCode != errCode){ var tmpText = secObj.options[retCode].text; secObj.options.remove(retCode); alert("delete option '"+tmpText+"' successful!"); } } <!-- 4删除指定选项 --> function delTheSecItem(secObj){ for(var i=0; i<secObj.options.value; i++){ if(secObj.options[i].selected == true){ var tmpText = secObj.options[i].text; secObj.options.remove(i); alert("delete option '"+tmpText+"' successful!"); } } } <!-- 5根据itemvalue修改其text内容 --> function modItemText(secObj,itemText,itemValue){ var retCode = checkValue(secObj,itemValue); if(retCode != errCode){ var tmpText = secObj.options[retCode].text; secObj.options[retCode].text = itemText; alert("mod option '"+tmpText+"' successful!"); } } <!-- 6设置指定的itemText选中 --> function setItemTextSts(secObj,itemText){ if(secObj.options.length == 0){ alert("options is null"); return; } var i=0; for(; i<secObj.options.length; i++){ if(secObj.options[i].text == itemText){ secObj.options[i].selected = true; alert("set option '"+secObj.options[i].text+"' successful!"); return; } } if(i == secObj.options.length){ alert("option "+itemText+" not found!"); } } <!-- 7设置指定的itemValue选中 --> function setItemValueSts(secObj,itemValue){ var retCode = checkValue(secObj,itemValue); if(retCode != errCode){ secObj.options[retCode].selected = true; } } <!-- 获取选中状态的值 opType:0,value;1,text;2,index; --> function getSecOpValue(secObj,opType){ if(opType !=0 && opType != 1 && opType != 2){ return "optype param is unvalid!"; } for(var i=0; i<secObj.options.length; i++){ if(secObj.options[i].selected == true){ switch(opType){ case 0: return secObj.options[i].value; case 1: return secObj.options[i].text; case 2: return i; default: return i; } } } } <!-- 清空选项 --> function clearAll(){ document.all.secId.options.length = 0; } // --></mce:script> <body> <select id='secId'> <option name='opId1' value='1'>sec1</option> <option name='opId2' value='2'>sec2</option> <option name='opId3' value='3'>sec3</option> </select> <br> <input type="button" name="btn1" value="判断Value值(2)" onclick='checkValue(secId,2)'/><br> <input type="button" name="btn2" value="增加新的Option(value=4)" onclick='addItem(secId,"hello",4)'/><br> <input type="button" name="btn3" value="删除option选项(value=4)" onclick='delItem(secId,4)'/><br> <input type="button" name="btn4" value="删除选中option" onclick='delTheSecItem(secId)'/><br> <input type="button" name="btn5" value="修改option(value=4)的显示内容(hellworld)" onclick='modItemText(secId,"helloworld",4)'/><br> <input type="button" name="btn6" value="设置text(sec3)为选中状态" onclick='setItemTextSts(secId,"sec3")'/><br> <input type="button" name="btn7" value="设置value(4)为选中状态" onclick='setItemValueSts(secId,4)'/><br> <input type="button" name="btn8" value="获取选中option的value" onclick='alert(getSecOpValue(secId,0))'/><br> <input type="button" name="btn9" value="获取选中option的text" onclick='alert(getSecOpValue(secId,1))'/><br> <input type="button" name="btn10" value="获取选中option的index" onclick='alert(getSecOpValue(secId,2))'/><br> <input type="button" name="btn11" value="清空option选项" onclick='clearAll()'/><br> </body>
相关阅读 更多 +
