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. 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 value = "2" selected = "selected" >2 < option value = "3" >3 Copy after loginThe second typeis to control the selected item through front-end js:< script type = "text/javascript" > function change(){ document.getElementById("sel")[2].selected=true; } < select id = "sel" > < option value = "1" >1 < option value = "2" >2 < option value = "3" >3 < input type = "button" value = "修改" onclick = "change()" />Copy after loginThe 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;
Copy after login
Some other techniques for operating thetag are as follows:1) Dynamically create selectfunction createSelect(){ var mySelect = document.createElement( "select" ); mySelect.id = "mySelect" ; document.body.appendChild(mySelect); }Copy after login2) Add option optionfunction addOption(){ //根据id查找对象， var obj=document.getElementById( 'mySelect' ); //添加一个选项 obj.add( new Option( "文本" , "值" )); }Copy after login3) Delete all options optionfunction removeAll(){ var obj=document.getElementById( 'mySelect' ); obj.options.length=0; }Copy after login4) Delete an option optionfunction removeOne(){ var obj=document.getElementById( 'mySelect' ); //index,要删除选项的序号，这里取当前选中选项的序号 var index=obj.selectedIndex; obj.options.remove(index); }Copy after login5) Get the value of optionvar obj=document.getElementById( 'mySelect' ); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].value;Copy after login6) Get the text of optionvar obj=document.getElementById( 'mySelect' ); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].text;Copy after login7) Modify option optionvar obj=document.getElementById( 'mySelect' ); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index]= new Option( "新文本" , "新值" );Copy after login8) Delete selectfunction removeSelect(){ var mySelect = document.getElementById( "mySelect" ); mySelect.parentNode.removeChild(mySelect); }Copy after loginThe 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：selectset updefaultsource：php.cnPrevious article：How to use Vue to dynamically generate a formNext article：How to use the console[''] input method in JSStatement of this WebsiteThe 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.cnLatest Articles by AuthorProblems with pop-up windows not being centered in weebox2018-06-23 18:19:43How to use excel-like components in vue+canvas2018-06-23 18:17:39How to call class in JavaScript2018-06-23 18:11:37How to implement pull-up refresh function using Vue framework2018-06-23 18:10:14How to implement image cropping component using Vue mobile terminal2018-06-23 18:06:43About WeChat mini program templates and modular usage (detailed tutorial)2018-06-23 18:04:28How to implement pull-up loading function in vue22018-06-23 18:02:45How to implement three-level linkage using Vue22018-06-23 18:00:45How to implement data request display loading graph in vue22018-06-23 17:58:23How to set up and monitor using element full screen2018-06-23 17:56:41Latest IssuesHow 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:2401276Prevent MySQL from reading when updatingI have two simple queries, one to read the table and one to update the table. How to lock ...From 2023-11-07 18:05:5301203Get column names and data for CSV export (MYSQL) using PHPI 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:5802279MySQL: How to use CASE with ORDER BY clauseI have a stored procedure that has to return a table after filtering rows based on input. ...From 2023-11-01 17:44:1501171The rephrased title is: MySQL table name using double quotesI'm executing a mysql query like this: Select*from "User"; it returns: There is ...From 2023-10-24 22:39:0001301Related TopicsMore>How to solve access deniedlatex usageWhat are the five types of aggregate functions?Maximize web pageReasons for dns exceptionHow to open url fileThe role of base tagmysql modify data table namePopular Recommendationswhat does js meanHow to convert string to array in js?How to refresh the page using javascriptHow to delete an item in js arrayHow to use sqrt functionPopular TutorialsMore>Related TutorialsPopular RecommendationsLatest coursesThe latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)1395748PHP introductory tutorial one: Learn PHP in one week4208172JAVA Beginner's Video Tutorial2357769Little Turtle's zero-based introduction to learning Python video tutorial493689PHP zero-based introductory tutorial827158The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)1395748 times of learningJAVA Beginner's Video Tutorial2357769 times of learningLittle Turtle's zero-based introduction to learning Python video tutorial493689 times of learningQuick introduction to web front-end development213557 times of learningMaster PS video tutorials from scratch844873 times of learning[Web front-end] Node.js quick start3300 times of learningComplete collection of foreign web development full-stack courses2643 times of learningGo language practical GraphQL2092 times of learning550W fan master learns JavaScript from scratch step by step476 times of learningPython master Mosh, a beginner with zero basic knowledge can get started in 6 hours11441 times of learningLatest DownloadsMore>Web EffectsWebsite Source CodeWebsite MaterialsFront 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 templateAbout usDisclaimerSitemapphp.cn：Public welfare online PHP training，Help PHP learners grow quickly！
