js select option value

Solutions on MaxInterview for js select option value by the best coders in the world

showing results for - "js select option value"

23 Apr 2017

1 <body>
2   
3   <select id="list" style="padding: 10px;" onchange="getSelectValue();">
4     <option value="js">JavaScript</option>
5     <option value="php">PHP</option>
6     <option value="c#">Csharp</option>
7     <option value="java">Java</option>
8     <option value="node">Node.js</option>
9   </select>
10   
11    <script>
12        function getSelectValue()
13        {
14            var selectedValue = document.getElementById("list").value;
15            alert(selectedValue);
16        }
17        getSelectValue();
18    </script>
19 </body>

source

Giuseppe

23 Feb 2019

1<select id="ddlViewBy">
2  <option value="1">test1</option>
3  <option value="2" selected="selected">test2</option>
4  <option value="3">test3</option>
5</select>
6
7var e = document.getElementById("ddlViewBy");
8var strUser = e.value;
9//Would make strUser be 2.
10
11var e = document.getElementById("ddlViewBy");
12var strUser = e.options[e.selectedIndex].text;
13//Would make strUser be test2.

source

María Camila

09 Apr 2019

1(function() {
2    
3    // get references to select list and display text box
4    var sel = document.getElementById('scripts');
5    var el = document.getElementById('display');
6
7
8    function getSelectedOption(sel) {
9        var opt;
10        for ( var i = 0, len = sel.options.length; i < len; i++ ) {
11            opt = sel.options[i];
12            if ( opt.selected === true ) {
13                break;
14            }
15        }
16        return opt;
17    }
18
19    // assign onclick handlers to the buttons
20    document.getElementById('showVal').onclick = function () {
21        el.value = sel.value;    
22    }
23    
24    document.getElementById('showTxt').onclick = function () {
25        // access text property of selected option
26        el.value = sel.options[sel.selectedIndex].text;
27    }
28
29    document.getElementById('doLoop').onclick = function () {
30        var opt = getSelectedOption(sel);
31        el.value = opt.value;
32    }
33    
34}());
35// immediate function to preserve global namespace
36

Florencia

05 Mar 2019

1// other.html
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8    <title>Change on value select</title>
9  </head>
10  <body>
11    <span class="wpcf7-form-control-wrap Profession"
12      ><select name="Profession" class="select" aria-invalid="false">
13        <option value="Nurse">Nurse</option>
14        <option value="Doctor">Doctor</option>
15        <option value="Lawyer">Lawyer</option>
16        <option value="Accountant">Accountant</option>
17        <option value="Developer">Developer</option>
18        <option value="Architect">Architect</option>
19        <option value="Other">Other</option>
20      </select></span
21    >
22    <div class="other_role"><h1>It works!!!</h1></div>
23    <script src="other.js"></script>
24  </body>
25</html>
26
27
28/* other.js - hide the div with the class 'other_role' 
29 * and display it when the user selects 'other' from the options 
30 * you can display anything you like and feel free to refactor the code
31*/
32document.querySelector(".other_role").style.display = "none";
33
34let roleOptionSelect = document.querySelector(".select");
35
36roleOptionSelect.addEventListener("change", function () {
37  if (roleOptionSelect.value === "Other") {
38    console.log(roleOptionSelect.value);
39    document.querySelector(".other_role").style.display = "block";
40  } else {
41    console.log("Meh!!!");
42    document.querySelector(".other_role").style.display = "none";
43  }
44});
45

similar questions

js select option in form

queries leading to this page