Home >Web Front-end >JS Tutorial >JS operation select drop-down box dynamic changes (create/delete/get)_javascript skills

JS operation select drop-down box dynamic changes (create/delete/get)_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:33:031177browse

1. Dynamically create select

Copy code The code is as follows:

function createSelect(){
var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

2 .Add option option
Copy code The code is as follows:

function addOption(){
//Find objects based on id,
var obj=document.getElementByIdx_x('mySelect');
//Add an option
obj.add(new Option("text","value"));
}

3. Delete all options option
Copy code The code is as follows:

function removeAll(){
var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;
}

4. Delete an option option
Copy code The code is as follows:

function removeOne(){
var obj=document.getElementByIdx_x('mySelect');
//index, to delete the serial number of the option, here take the serial number of the currently selected option
var index=obj.selectedIndex;
obj. options.remove(index);
}

5. Get the value of option option
Copy code The code is as follows:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index].value;

6. Get the text of option option
Copy code The code is as follows:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index].text;

7. Modify option option
Copy code The code is as follows:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index]=new Option("new text","new value");

8. Delete select
Copy code The code is as follows:

function removeSelect(){
var mySelect = document.getElementByIdx_x("mySelect");
mySelect. parentNode.removeChild(mySelect);
}
Statement:
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