How to set the default selected option based on the select tag?

Below I will share with you an article on how to set the default selected option for the select tag. It has a good reference value and I hope it will be helpful to everyone.

There are two methods.

##The first sets the selected item through the attribute of . This method can be used in dynamic languages ​​such as php in the background according to Need to control the output results.

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

The second type 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 tag is:

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

Some other 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

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

6) Get the text of 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);
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Sending a post request through axios found that springMVC could not receive parameters (detailed tutorial)

Passed Vue implements adding axios components to solve the problem of null parameters in post (detailed tutorial)

In vue, use axios to handle the problem of post request parameters (detailed tutorial)

The above is the detailed content of How to set the default selected option based on 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：How to use Vue to dynamically generate a form Next article：How to use the console[''] input method in JS

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

• Problems with pop-up windows not being centered in weebox
  2018-06-23 18:19:43
• How to use excel-like components in vue+canvas
  2018-06-23 18:17:39
• How to call class in JavaScript
  2018-06-23 18:11:37
• How to implement pull-up refresh function using Vue framework
  2018-06-23 18:10:14
• How to implement image cropping component using Vue mobile terminal
  2018-06-23 18:06:43
• About WeChat mini program templates and modular usage (detailed tutorial)
  2018-06-23 18:04:28
• How to implement pull-up loading function in vue2
  2018-06-23 18:02:45
• How to implement three-level linkage using Vue2
  2018-06-23 18:00:45
• How to implement data request display loading graph in vue2
  2018-06-23 17:58:23
• How to set up and monitor using element full screen
  2018-06-23 17:56:41

Latest Issues

How to pass key as select option value in v-for when changed (VueJS) I'm using Vue3 and Bootstrap5. I have a select with multiple options. Now I am displaying ...

From 2023-11-17 08:55:24

0

1

276

Prevent MySQL from reading when updating I have two simple queries, one to read the table and one to update the table. How to lock ...

From 2023-11-07 18:05:53

0

1

203

Get column names and data for CSV export (MYSQL) using PHP I need a way to export a MYSQL database to CSV via PHP, but I also need to select the colu...

From 2023-11-04 21:59:58

0

2

279

MySQL: How to use CASE with ORDER BY clause I have a stored procedure that has to return a table after filtering rows based on input. ...

From 2023-11-01 17:44:15

0

1

171

The rephrased title is: MySQL table name using double quotes I'm executing a mysql query like this: Select*from "User"; it returns: There is ...

From 2023-10-24 22:39:00

0

1

301

Related Topics

More>

• word to jpg
• Why do the words after typing in word disappear?
• oracle database running sql method
• How to adjust computer screen brightness
• How to shut down your computer quickly
• How to read carriage return in java
• What format is doc?
• Digital currency quantitative trading platform

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)

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

  4231569
• 
  JAVA Beginner's Video Tutorial

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

  498310
• 
  PHP zero-based introductory tutorial

  834135

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

  1403337 times of learning
• 
  JAVA Beginner's Video Tutorial

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

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

  214196 times of learning
• 
  Master PS video tutorials from scratch

  859118 times of learning

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

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

  3632 times of learning
• 
  Go language practical GraphQL

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

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

  16127 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！