Commonly used codes for js operations select and option_Basic knowledge

1. Get the value and text of the selected selection. The html code is as follows :

Copy code Code As follows:

one
two
three

You can use the following script code s Get the selected value and text

Copy code The code is as follows:

$("#mySelect" ).val(); //Get the value of the selected record
$("#mySelect option:selected").text(); //Get the text value of the selected record

2. Use the new Option("text","value") method to add option option

Copy code code As follows:

var obj = document.getElementById("mySelect");obj.add(new Option("4","4"));

3. Delete all options option

Copy code The code is as follows:

var obj = document.getElementById("mySelect");obj.options.length = 0;

4. Delete the selected option option

Copy code The code is as follows:

var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options .remove(index);

5. Modify the selected option option

Copy code The code is as follows:

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option( "three",3); //Change the corresponding value
obj.options[index].selected = true; //Keep the selected state

6. Delete select

Copy code The code is as follows:

var obj = document.getElementById("mySelect") ;
obj.parentNode.removeChild(obj); //Remove the current object

7. Select the selected response event

Copy code The code is as follows:

$("#mySelect").change(function(){ //Add what needs to be executed Operation code})

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")); //This is only valid in IE
obj.options.add(new Option("text", "value")); //This is compatible with IE and firefox
}

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 the code The code is as follows:

removefunctionOne(){
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

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 the 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);
}

The complete code of the entire instance is as follows:

Copy the code The code is as follows:

改进版：在select中添加、修改、删除option元素

复制代码 代码如下:

function watch_ini(){ // 初始
for(var i=0; ivar word = document.createElement_x("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement_x("OPTION");
word.text = f.word.value;
f.keywords.add(word);
}

但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下：

复制代码 代码如下:

function watch_ini(){ // 初始
for(var i=0; ivar oOption=new Option(arguments[i],arguments[i]);
document.getElementByIdx_x("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}

整个实例的完整代码如下：

复制代码 代码如下:

用一个字符串创建一个数组方法:

复制代码 代码如下:

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Atom editor mac version download

The most popular open source editor

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6

Visual web development tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Show More

Hot Topics

Where is the login entrance for gmail email?

7488

15

CakePHP Tutorial

1377

52

What is the format of the account name of steam

77

11

win11 activation key permanent

51

19

nyt connections hints and answers

19

40

Show More