JavaScript operates on select elements and option instance code
- 2020-12-09 00:42:08
- OfStack
Without further ado, I will post the code directly to you. The specific code is as follows:
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<title></title>
<!-- add jquery-->
<script src="../Script/jQuery/jquery-...min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
createSelect("select", "addSel");
addOption("addSel", "first", " The first 1 A data ");
addOption("addSel", "secord", " The first 2 A data ");
addOption("addSel", "three", " The first 3 A data ");
addOption("addSel", "four", " The first 4 A data ");
addOption("addSel", "fives", " The first 5 A data ");
removeOneByIndex("addSel", );
removeOneByObj("addSel", "secord");
// add 1 a option Change event Call a self-written method
$("#addSel").change(function () {
alert(" The old text: "+getOptionText("addSel") + " The old Value : " + getOptionValue("addSel"));
editOptions("addSel", " New text "," new Value"); // Note: No value The value of value The default value text The value of the
alert(" New text: " + getOptionText("addSel") + " new Value : " + getOptionValue("addSel"));
})
})
// Dynamic creation tape id The elements of the
function createSelect(element, id) {
var select = document.createElement(element);
select.id = id;
document.body.appendChild(select);
}
// According to the select the id Add a option option
function addOption(selectID,value,text) {
// According to the id Find the object,
var obj = document.getElementById(selectID);
obj.options.add(new Option(text, value)); // This is compatible with IE with firefox
}
// Remove all options option
function removeAll(selectID) {
var obj = document.getElementById(selectID);
obj.options.length = ;
}
// According to the index Value to delete 1 An option option
function removeOneByIndex(selectID,index) {
var obj = document.getElementById(selectID);
//index, To delete the ordinal number of the option, take the ordinal number of the currently selected option
//var index = obj.selectedIndex;// Gets the selected option index;
obj.options.remove(index);
}
// According to the value or text Value to delete 1 An option option
function removeOneByObj(selectID, textOrValue) {
var obj = document.getElementById(selectID);
//index, To delete the ordinal number of the option, take the ordinal number of the currently selected option
//var index = obj.selectedIndex;// Gets the selected option index;
for (var i = ; i < obj.options.length; i++) {
if (obj.options[i].innerHTML == textOrValue || obj.options[i].value == textOrValue) {
obj.options.remove(i);
break;
}
}
}
// To obtain 1 a Option Value ;
function getOptionValue(selectID){
var obj = document.getElementById(selectID);
var index=obj.selectedIndex; // Sequence number, the sequence number of the currently selected option
var val = obj.options[index].value;
return val;
}
// To obtain 1 a option Text;
function getOptionText(selectID) {
var obj = document.getElementById(selectID);
var index=obj.selectedIndex; // Sequence number, the sequence number of the currently selected option
var val = obj.options[index].text;
return val;
}
// Modify the selected option
function editOptions(selectID,newText,newValue) {
var obj = document.getElementById(selectID);
var index=obj.selectedIndex; // Sequence number, the sequence number of the currently selected option
obj.options[index] = new Option(newText, newValue);
obj.options[index].selected = true;
}
// delete select
function removeSelect(){
var select = document.getElementById("select");
select.parentNode.removeChild(select);
}
</script>
</head>
<body>
</body>
</html>The above is the JavaScript operation select elements and option example code shared by this site, I hope to help you.