Js dynamically changes the index value of the select option

  • 2020-03-30 03:32:11
  • OfStack

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 select operation is a common in form, delete multiple select value today there is a problem, make the along while the original is caused by the index (or delete from the beginning of the index is big when you need to delete, and then delete index is small, or delete the index small index after large index changes, and then deleted can be a problem - the problem is the for loop is from big to small, rather than a conventional from 0 to length)


//4. Delete the item selected in the 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
3 delete an Item from the select option
Delete the item in the select select
5 change the text of value="paraValue" in the select option to "paraText"
6. Set the first Item of text="paraText" in select to be selected
7 set the Item of value="paraValue" in select to be selected
8 gets the value of the currently selected item of the select
9 gets the text of the currently selected item of the select
10 gets the Index of the currently selected item of the select
11 clear the item of the select

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

Dynamically delete all options in select:


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

Dynamically delete an option in the select:


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

Dynamically add option in select:


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

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

Js code


//1. Determine whether there is an Item with Value="paraValue" in the select option
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 to the select option
function jsAddItemToSelect(objSelect, objItemText, objItemValue) { 
//To determine whether there is
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
alert(" the Item the Value The value already exists "); 
} else { 
var varItem = new Option(objItemText, objItemValue); 
objSelect.options.add(varItem); 
alert(" Success to join "); 
} 
} 

//3. Delete an Item from the select option
function jsRemoveItemFromSelect(objSelect, objItemValue) { 
//To 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(" the select In the   There is no item "); 
} 
} 


//4. Delete the item selected in the 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. Change the text of value="paraValue" in the select option to "paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { 
//To 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[i].text = objItemText; 
break; 
} 
} 
alert(" Successfully changed "); 
} else { 
alert(" the select In the   There is no item "); 
} 
} 

//6. Set the first Item of text="paraText" in select to be selected
function jsSelectItemByValue(objSelect, objItemText) { 
//To determine whether there is
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; 
} 
} 
//Results Show that
if (isExit) { 
alert(" Success is selected "); 
} else { 
alert(" the select In the   There is no item "); 
} 
} 

//7. Set the Item of value="paraValue" in select as selected
objSelect.value = objItemValue; 

//8. Get the value of the currently selected item of the select
var currSelectValue = objSelect.value; 

//9. Gets the text of the currently selected item of the select
var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text; 

//10. Gets the Index of the currently selected item of the select
var currSelectIndex = objSelect.selectedIndex; 

//11. Clear the item of the 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: i@lxl.cn
// Modify: i@cnlei.com
function watch_ini(){ //  The 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){ //  increase 
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ //  The editor 
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ //  Modify the 
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 "," it "," , "); //Initial keyword
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value=" increase " onclick="watch_add(this.form);" />
<input type="button" value=" Modify the " 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>

Related articles: