Dojo
Dojo is an open source DHTML toolkit implemented in the javascript language. It is built on the basis of several project donations (nWidgets, Burstlib, f(m)), which is why it is called a "unified"toolkit. Dojo's goal is to solve the long-standing historical problems with DHTML when developing DHTML applications. Cross-browser issues.
1. Problem background
Here is a drop-down box, where the options are all year round, and the value and text of the drop-down box are selected.
2. Implement source code
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>dojo-get the value and text of the drop-down box</title> <link rel="stylesheet" href="js/dojo/dijit/themes/claro/claro.css" /> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <style> #season{ width:200px; } </style> <script> dojoConfig={async:true,parseOnLoad:true} </script> <script> require([ "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!" ], function(Memory, FilteringSelect){ var seasonStore = new Memory({ data: [ {name:"Spring", id:"spring"}, {name:"Summer", id:"summer"}, {name:"Autumn", id:"autumn"}, {name:"winter", id:"winter"} ] }); var seasonSelect = new FilteringSelect({ id: "season", name: "season", value: "spring", store: seasonStore, searchAttr: "name" }, "season").startup(); }); </script> </head> <body> <input id="season" /><br> <button id="valueBtn" onclick="alert(dijit.byId('season').get('value'))">Get the drop-down box value</button> <button id="textBtn" onclick="alert(dijit.byId('season').get('displayedValue'))">Get the drop-down box text</button> </body> </html>3. Achieve results
(1) Initialization
(2) Click the "Get drop-down box value" button
(3) Click the "Get drop-down box text" button