SoFunction
Updated on 2025-03-01

JavaScript operation select elements and option instance code

JavaScript operation select elements and option instance code

Updated: January 29, 2016 14:05:42 Author: Ouou Oufeng_
This article mainly introduces the relevant information about JavaScript operation select elements and option instance code. Friends who need it can refer to it

I won’t say much nonsense, just post the code to you, the specific code is as follows:

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "/TR/xhtml/DTD/">
<html xmlns="//xhtml">
<head>
<title></title>
<!--Add tojquery-->
<script src="../Script/jQuery/jquery-..." type="text/javascript"></script>
<script type="text/javascript">
$(function () {
createSelect("select", "addSel");
addOption("addSel", "first", "First Data");
addOption("addSel", "secord", "Second Data");
addOption("addSel", "three", "Third Data");
addOption("addSel", "four", "Fourth Data");
addOption("addSel", "fives", "Fifth data");
removeOneByIndex("addSel", );
removeOneByObj("addSel", "secord");
//Add an option change event and call the method you wrote yourself$("#addSel").change(function () {
alert("Old text:"+getOptionText("addSel") + "Old Value:" + getOptionValue("addSel"));
editOptions("addSel", "New Text","New Value"); //Note: When the value value is not passed, the value value defaults to the value of textalert("New text:" + getOptionText("addSel") + "New Value:" + getOptionValue("addSel"));
})
})
//Dynamic creation of elements with idfunction createSelect(element, id) {
var select = (element);
 = id;
(select);
}
//Add option option according to the id of the selectfunction addOption(selectID,value,text) {
//Finding the object based on id,var obj = (selectID); 
(new Option(text, value)); //This is compatible with IE and firefox}
//Delete all options optionsfunction removeAll(selectID) {
var obj = (selectID);
 = ;
}
//Delete an option according to index valuefunction removeOneByIndex(selectID,index) {
var obj = (selectID);
//index, to delete the sequence number of the option, here is the sequence number of the currently selected option//var index = ;//get the index of the selected option;(index);
}
//Delete an option according to the value or text valuefunction removeOneByObj(selectID, textOrValue) {
var obj = (selectID);
//index, to delete the sequence number of the option, here is the sequence number of the currently selected option//var index = ;//get the index of the selected option;for (var i = ; i < ; i++) {
if ([i].innerHTML == textOrValue || [i].value == textOrValue) {
(i);
break;
}
}
} 
//Get an Option Value;function getOptionValue(selectID){
var obj = (selectID); 
var index=; //Serial number, take the currently selected option numbervar val = [index].value;
return val;
} 
//Get an option Text;function getOptionText(selectID) {
var obj = (selectID); 
var index=; //Serial number, take the currently selected option numbervar val = [index].text;
return val;
}
//Modify the selected optionfunction editOptions(selectID,newText,newValue) {
var obj = (selectID); 
var index=; //Serial number, take the currently selected option number[index] = new Option(newText, newValue);
[index].selected = true;
}
//Delete selectfunction removeSelect(){
var select = ("select"); 
(select); 
}
</script>
</head>
<body>
</body>
</html>

The above is the example code for JavaScript operation select elements and option shared by the editor. I hope it will be helpful to everyone.

  • js
  • select
  • option

Related Articles

  • An example explanation of JS native white dot carousel diagram

    Below, the editor will give you an example explanation of JS native white dot carousel. The editor thinks it is quite good, so I will share it with you now and give you a reference. Let's take a look with the editor
    2017-07-07

  • JS implements transform to achieve fan effect

    This article mainly introduces the implementation of JS transform to achieve fan effects. The sample code in the article is very detailed and has certain reference value. Interested friends can refer to it.
    2020-01-01

  • Implement the principle and code of local masking and closing

    Implementing local masking may have special significance for some friends. The principle of local masking is very simple, and it has a different effect with closing. This article will introduce the implementation method. Interested friends can learn about it, which may be helpful to you.
    2013-02-02

  • The nine-grid implementation and item jump function of WeChat mini program project practice

    This article mainly introduces the nine-grid implementation and item jump function of WeChat mini program project practice. Friends who need it can refer to it
    2018-07-07

  • 6 types of javascript display current system time code

    This article mainly introduces 6 types of JavaScript display of the current system time code. Everyone is welcome to learn from it.
    2015-12-12

  • BootStrap intelligent form practical series (three) detailed explanation of block form configuration

    This article mainly introduces the relevant information about the BootStrap smart form practical series (III) detailed explanation of the block form configuration. It is very good and has reference value. Friends who need it can refer to it.
    2016-06-06

  • Solution to the approximate value of javascript decimal calculation

    In JavaScript, decimals can only be calculated similarly, for example: 5.06+1.30, the result you get will be 6.3599999999999999999, but some decimal calculations are correct. If the calculation has an approximate value, you can use the following method to calculate.
    2010-02-02

  • JS determines browser type and version code (with multiple instance codes)

    There are many types of browsers in the world. In addition to the four major browsers we are familiar with, IE, Firefox, Opera, and Safari, there are nearly a hundred browsers in the world. Sometimes we need to judge the browser and version to facilitate subsequent operations. In a word, the compatibility of the browser is too poor and the standards are missing.
    2014-05-05

  • js operation scrollbar event instance

    This article mainly introduces the method of using scrollbar events by js, and examples analyze the scrollbar usage skills and related precautions. Friends who need it can refer to it
    2015-01-01

  • The difference between using regular expression g pattern and non-g pattern in JS

    This article introduces in detail the difference between using regular expression g pattern and non-g pattern in JS. It is very good and has reference value. If you need it, please refer to it.
    2017-04-04

Latest Comments