Example of dynamically changing the index value of select option in js

Example of dynamically changing the index value of select option in js

A problem occurred when deleting multiple select values today. After half a day, it was originally caused by the index (that is, when the index is deleted, it should be deleted from the large index and then deleted from the small index ).

 

 

 

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; }

The select Operation in Javascript is a common form. A problem occurs when multiple select values are deleted today, after half a day, it was originally caused by the index (that is, when the index is deleted, it should be deleted from the index size, and then the index size should be deleted, otherwise, after the index is deleted, the index with a large index changes, and then the index is deleted. The key to the problem is that the for loop must be large to small, instead of the regular length from 0)

// 4. delete the 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. check whether there is an Item with Value = "paraValue" in the select option.
2. add an Item to the select option
3. delete an Item from the select option
4. Delete the selected items in the select statement.
5. In the select option, set the text of value = "paraValue" to "paraText"
6. Set the first Item of text = "paraText" in select as the selected Item.
7. Set Item of value = "paraValue" in select to selected
8. Obtain the value of the selected item in the select statement.
9.
10. Obtain the Index of the selected item in the select statement.
11 Clear select items

========================================================== ====================================

Dynamically delete all options in the select statement:

function deleteAllOptions(sel){ sel.options.length=0; }

Dynamically delete an option in the select statement:

function deleteOption(sel,indx){ sel.options.remove(indx); }

Dynamically Add the option in the select statement:

function addOption(sel,text,value){ sel.options.add(new Option(text,value)); }

Both IE and FireFox can be tested successfully. I hope this can be used in the future.

========================================================== ===

Js Code

// 1. determine whether the select option contains the Item 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;} // 2. add an Item function jsAddItemToSelect (objSelect, objItemText, objItemValue) to the select option {// determine whether there is if (jsSelectIsExitItem (objSelect, objItemValue )) {alert ("the Value of this Item already exists");} else {var varItem = new Option (objItemText, objItemValue); objSelect. options. add (varItem); alert ("successfully added") ;}// 3. delete an Item function jsRemoveItemFromSelect (objSelect, objItemValue) from the select option {// determine 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 ("deleted successfully") ;}else {alert ("this select does not exist") ;}} // 4. delete the 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) {// determine 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 ("modified successfully") ;}else {alert ("this select option does not exist") ;}}// 6. set the first Item of text = "paraText" in select to the selected function jsSelectItemByValue (objSelect, objItemText) {// determine 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 the result if (isExit) {alert ("selected successfully ");} else {alert ("this select does not exist") ;}// 7. set Item of value = "paraValue" in select to select objSelect. value = objItemValue; // 8. obtain the value var currSelectValue = objSelect of the selected item in the select statement. value; // 9. obtain the text var currSelectText = objSelect of the selected item in the select statement. options [document. all. objSelect. selectedIndex]. text; // 10. obtain the Index var currSelectIndex = objSelect of the selected item in the select statement. selectedIndex; // 11. clear the select item objSelect. options. length = 0;

The complete code for the entire instance is as follows:

<! Doctype html public "-// w3c // dtd html 4.0 transitional // en">