HTML控件——select常用操作
select常用操作:追加,移除,選擇。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML-select-操作</title> </head> <body> <select id="s1" name="s1" multiple="multiple"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br /> <input id="btnAppend" type="button" value="Append" onclick="return btnAppend_onclick()" /> <input id="btnRemove" type="button" value="Remove" language="javascript" onclick="return btnRemove_onclick()" /> <input id="btnGetText" type="button" value="Get Selected Text" language="javascript" onclick="return btnGetText_onclick()" /> </body> </html>
<script type="text/javascript"> // 功能:追加option // 參數: // obj:select control // strText:option的文字 // strValue:item的值 function appendSelectOption(obj,strText,strValue) { var ctrl = obj; var option = new Option(); // 注意:對象Option首字母大寫 option.text=strText; option.value=strValue; if (isExsitOption(obj,option)) {return;} ctrl.add(option); // 注意:方法add()首字母大寫 } // 功能:移除item // 參數: // obj:select control function removeSelectedOption(obj) { var ctrl = obj; var selectedIdx = ctrl.selectedIndex; //alert(selectedIdx); if (selectedIdx==-1) { alert('Please selected item first!'); return; } ctrl.remove(selectedIdx) } // 功能:移除item // 參數: // obj:select control // retType:取option的text or value function getSelectedOption(obj,retType) { var ctrl = obj; var selectedIdx = ctrl.selectedIndex; //alert(selectedIdx); if (selectedIdx==-1) { alert('Please selected item first!'); return; } if (retType=='TEXT') alert('selected text is ' + ctrl.options[selectedIdx].text); if (retType=='VALUE') alert('selected value is ' + ctrl.options[selectedIdx].value); } function isExsitOption(obj,option) { for(i=0;i<obj.options.length;i++) { if(obj.options[i].text==option.text) { alert('this text is exsit!'); return true; } if(obj.options[i].value==option.value) { alert('this value is exsit!'); return true; } } return false; } // 測試——追加option function btnAppend_onclick() { var ctrl = document.getElementById('s1'); appendSelectOption(ctrl,1,1); } // 測試——移除option function btnRemove_onclick() { var ctrl = document.getElementById('s1'); removeSelectedOption(ctrl); } // 測試——取選擇的內容 function btnGetText_onclick() { var ctrl = document.getElementById('s1'); getSelectedOption(ctrl,'TEXT'); } </script>
人的一生应该这样度过:当他回首往事的时候,不会因为虚度年华而悔恨,也不会因为碌碌无为而羞愧。