Home > Web Front-end > JS Tutorial > Several ways to operate select controls with js_form special effects

Several ways to operate select controls with js_form special effects

WBOY
Release: 2016-05-16 18:25:42
Original
1217 people have browsed it

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
4 Delete the selected item in the select
5 Modify the text of value="paraValue" in the select option to "paraText"
6 Set the first Item of text="paraText" in the select to be selected
7 Set the Item of value="paraValue" in the select to be selected
8 Get the value of the currently selected item of select
9 Get the text of the currently selected item of select
10 Get the Index of the currently selected item of select
11 Clear the selected item

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

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 if (objSelect.options[i]. value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}

// 2. Go to the select option Add an Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//Determine whether it exists
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("The Value of the Item already exists ");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("Successfully added");
}
}

// 3. Remove an Item from the select option
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//Determine whether it exists
if (jsSelectIsExitItem(objSelect, objItemValue) )) {
for (var i = 0; i if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove (i);
break;
}
}
alert("Deleted successfully");
} else {
alert("This item does not exist in the selection");
}
}


// 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) {
//Determine whether it exists
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i if (objSelect.options[i ].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("Successfully modified");
} else {
alert("This item does not exist in the selection");
}
}

// 6. Set the first Item of text="paraText" in the select to Select
function jsSelectItemByValue(objSelect, objItemText) {
//Determine whether it exists
var isExit = false;
for (var i = 0; i if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show the result
if (isExit) {
alert("Successfully selected");
} else {
alert("This item does not exist in the selection");
}
}

// 7. Set the Item with value="paraValue" in the select to be selected
function check(){
var c = document.all.objSelect;
for (var i=0;iif (c.options(i).value==paraValue){
c.selectedIndex =i;
}
}
}


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

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

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

// 11. Clear the selected item
document.all.objSelect.options.length = 0;

Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template