Detailed explanation of how to set the default selection of the select tag

This article mainly shares with you an option method for setting the default selected option of the select tag. It has a good reference value and I hope it can help everyone.

There are two methods.

The first method is to set the selected item through the attribute of . This method can control the output results as needed in the background in dynamic languages ​​such as php.

< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >

The second is to control the selected item through front-end js:

< script type = "text/javascript" >
function change(){
  document.getElementById("sel")[2].selected=true;
}
</ script >
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" >2</ option >
< option value = "3" >3</ option >
</ select >
< input type = "button" value = "修改" onclick = "change()" />

The js code to get the text of the selected item in the

label is:

var val = document.all.Item.options[document.all.Item.selectedIndex].text
var i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value;

Some others The techniques for operating the tag are as follows:

1) Dynamically create select

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

2) Add option option

function addOption(){
//根据id查找对象，
var obj=document.getElementById( 'mySelect' );
//添加一个选项
obj.add( new Option( "文本" , "值" ));
}

3) Delete all options option

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

4) Delete an option option

function removeOne(){
var obj=document.getElementById( 'mySelect' );
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

5) Get the value of option option

var obj=document.getElementById( 'mySelect' );
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;

6) Get the text of option option

var obj=document.getElementById( 'mySelect' );
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;

7) Modify option option

var obj=document.getElementById( 'mySelect' );
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]= new Option( "新文本" , "新值" );

8) Delete select

function removeSelect(){
var mySelect = document.getElementById( "mySelect" );
mySelect.parentNode.removeChild(mySelect);
}

Related recommendations:

What are the uses of select tags in HTML

JQuery Get the text content of multiple select tag options (example)

Detailed explanation of the method of js getting the value of the select tag

The above is the detailed content of Detailed explanation of how to set the default selection of the select tag. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

select set up default

source：php.cn

Previous article：FileReader implements local preview before uploading pictures Next article：Implementation code for JavaScript to implement todolist function

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

Latest Articles by Author

• Introduction to the latest PHP Programmer Toolbox v1.0 version
  1970-01-01 08:00:00
• Detailed explanation of vue-cli custom directive directive to add verification slider
  1970-01-01 08:00:00
• Detailed explanation of examples of receiving emails using IMAP with PHP
  2023-03-19 18:36:02
• Sharing of common usage scenarios of Redis
  2023-03-21 07:36:01
• Detailed explanation of conversion between JS numbers and strings
  1970-01-01 08:00:00
• Example sharing of adding email links to Dreamweaver web pages
  1970-01-01 08:00:00
• Introduction to Vue filter and its use
  1970-01-01 08:00:00
• PHP basic knowledge notes sharing
  2023-03-20 14:32:01
• Detailed explanation of WeChat applet file API
  1970-01-01 08:00:00
• Detailed explanation of ajax and same origin strategy implemented by JS
  1970-01-01 08:00:00

Latest Issues

SQL Count() also requires 0 I have only one table and I want to count each entry of a tag that starts with 0. Now I tr...

From 2024-04-06 19:48:53

0

1

449

sql groupby not working, I want to group by code_branch ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameas...

From 2024-04-06 19:24:49

0

2

488

An error was encountered while trying to retrieve the latest version of a package from search.maven.org "Error: Unable to retrieve data from Maven repository" while retrieving latest v...

From 2024-04-05 12:11:23

0

1

1471

Modify matSelect style when displaying options How to change properties of mat-select when option is on? <mat-selectclass="select...

From 2024-04-05 09:23:19

0

1

1374

Echo inside div with nested echo I'm trying to use echo<?phprequire'connect.php';$query=mysqli_query($conn,"SELECT*...

From 2024-04-04 11:09:23

0

1

390

Related Topics

More>

• What's going on when I can't connect to the network?
• What software is dreamweaver?
• How to check dead links on your website
• What are the oracle wildcards?
• git command
• How to use winimage
• Printer installation failed
• How to solve an error in the script of the current page

Popular Recommendations

• what does js mean
• How to convert string to array in js?
• How to refresh the page using javascript
• How to delete an item in js array
• How to use sqrt function

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1408263
• 
  PHP introductory tutorial one: Learn PHP in one week

  4240803
• 
  JAVA Beginner's Video Tutorial

  2438466
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  500378
• 
  PHP zero-based introductory tutorial

  838783

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1408263 times of learning
• 
  JAVA Beginner's Video Tutorial

  2438466 times of learning
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  500378 times of learning
• 
  Quick introduction to web front-end development

  214607 times of learning
• 
  Master PS video tutorials from scratch

  865825 times of learning

• 
  [Web front-end] Node.js quick start

  5274 times of learning
• 
  Complete collection of foreign web development full-stack courses

  4061 times of learning
• 
  Go language practical GraphQL

  3474 times of learning
• 
  550W fan master learns JavaScript from scratch step by step

  575 times of learning
• 
  Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

  17818 times of learning

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

• [form button] jQuery enterprise message form contact code
• [Player special effects] HTML5 MP3 music box playback effects
• [Menu navigation] HTML5 cool particle animation navigation menu special effects
• [form button] jQuery visual form drag and drop editing code
• [Player special effects] VUE.JS imitation Kugou music player code
• [html5 special effects] Classic html5 pushing box game
• [Picture special effects] jQuery scrolling to add or reduce image effects
• [Photo album effects] CSS3 personal album cover hover zoom effect

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

• [PNG material] Cute summer elements vector material (EPS PNG)
• [PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)
• [banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)
• [PNG material] Golden graduation cap vector material (EPS PNG)
• [PNG material] Black and white style mountain icon vector material (EPS PNG)
• [PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses
• [banner picture] Flat style Arbor Day banner vector material (AI+EPS)
• [PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

About us Disclaimer Sitemap

php.cn：Public welfare online PHP training，Help PHP learners grow quickly！