document.getElementById("louyuming").options[0].selected=true;function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { isExit = true; break; } } return isExit; }Javascript operation select is a common type in forms. Today, when deleting multiple select values, there was a problem. After a long time, it turned out that it was caused by the index (that is, when deleting, you should start from the large index, and then delete the small index, otherwise the index with the large index will change after deleting the small index, and then the large index will change. There will be problems when deleting again - the key to the problem is that the for loop needs to go from large to small, rather than the regular 0 to length)
// 4. Delete the selected item in select function jsRemoveSelectedItemFromSelect(objSelect) { var length = objSelect.options.length - 1; for(var i = length; i >= 0; i--){ if(objSelect[i].selected == true){ objSelect.options[i] = null; } } }1 Determine whether there is an Item with Value="paraValue" in the select option
2 Add an Item to the select option
3Remove an Item from the select option
4 Delete the selected item in select
5 Modify the text of value="paraValue" in the select option to "paraText"
6Set the first Item of text="paraText" in select as selected
7 Set the Item of value="paraValue" in select as selected
8 Get the value of the currently selected item
9 Get the text of the currently selected item
10 Get the index of the currently selected item
11 Clear the selected item
===============================================================================================
Dynamically delete all options in select:
function deleteAllOptions(sel){ sel.options.length=0; }Dynamically delete an option in select:
function deleteOption(sel,indx){ sel.options.remove(indx); }Dynamically add item option in select:
function addOption(sel,text,value){ sel.options.add(new Option(text,value)); }The above tests were successfully tested in IE and FireFox, and I hope they can be used in the future.
===========================================================
js code
// 1. Determine whether there is an Item function of Value="paraValue" in the select option jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { isExit = true; break; } } return isExit; } // 2. Add an Item function to the select option jsAddItemToSelect(objSelect, objItemText, objItemValue) { //Judge whether there is if (jsSelectIsExitItem(objSelect, objItemValue)) { alert("The Value value of this Item already exists"); } else { var varItem = new Option(objItemText, objItemValue); objSelect.options.add(varItem); alert("Successfully joined"); } } // 3. Remove an Item function from the select option jsRemoveItemFromSelect(objSelect, objItemValue) { //Judge whether there is if (jsSelectIsExitItem(objSelect, objItemValue)) { for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { objSelect.options.remove(i); break; } } alert("Successfully deleted"); } else { alert("This item does not exist in this select"); } } // 4. Delete the selected item in select function jsRemoveSelectedItemFromSelect(objSelect) { var length = objSelect.options.length - 1; for(var i = length; i >= 0; i--){ if(objSelect[i].selected == true){ objSelect.options[i] = null; } } } // 5. Modify the text of value="paraValue" in the select option to "paraText" function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { //Judge whether there is if (jsSelectIsExitItem(objSelect, objItemValue)) { for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { objSelect.options[i].text = objItemText; break; } } alert("Successfully modified"); } else { alert("This item does not exist in this select"); } } // 6. Set the first Item of text="paraText" in select as selected function jsSelectItemByValue(objSelect, objItemText) { //Judge whether var isExit = false; for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].text == objItemText) { objSelect.options[i].selected = true; isExit = true; break; } } //Show result if (isExit) { alert("Successfully selected"); } else { alert("This item does not exist in this select"); } } // 7. Set the Item of value="paraValue" in the select to be selected objSelect.value = objItemValue; // 8. Get the value var of the currently selected item of select currSelectValue = objSelect.value; // 9. Get the text var currSelectText of the currently selected item of select var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text; // 10. Get the Index of the currently selected item of select var currSelectIndex = objSelect.selectedIndex; // 11. Clear the item of select objSelect.options.length = 0;The complete code of the entire instance is as follows:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html><head><title>javascript select options text value</title><meta name="keywords" content="javascript select options text value add modify delete set"><meta name="description" content="javascript select options text value add modify delete set"><script language="javascript"><!--// Author: [email protected]// Modify: [email protected] watch_ini(){ // Initial for(var i=0; i<arguments.length; i++){var oOption=new Option(arguments[i],arguments[i]);document.getElementById("MySelect")[i]=oOption;}}function watch_add(f){ // Add var oOption=new Option(f.word.value,f.word.value);f.keywords[f.keywords.length]=oOption;}function watch_sel(f){ // Edit f.word.value = f.keywords[f.keywords.selectedIndex].text;}function watch_mod(f){ // Modify f.keywords[f.keywords.selectedIndex].text = f.word.value;}function watch_del(f){ // Delete f.keywords.remove(f.keywords.selectedIndex);}function watch_set(f){ // Save var set = "";for(var i=0; i<f.keywords.length; i++){set += f.keywords[i].text + ";";}confirm(set);}//--></script></head><body><form name="watch" method="post" action=""><select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br><script language="javascript"><!--watch_ini("I","you","he","she","she","it","el"); // Initial keywords//--></script><input type="text" name="word" /><br /><input type="button" value="add" onclick="watch_add(this.form);" /><input type="button" value="modify" onclick="watch_mod(this.form);" /><input type="button" value="delete" onclick="watch_del(this.form);" /><input type="button" value="Save" onclick="watch_set(this.form);" /></form></body></html>