Answers for "js select selected value"

6

get selected value of dropdown in javascript

<body>
   
   <select id="list" style="padding: 10px;" onchange="getSelectValue();">
     <option value="js">JavaScript</option>
     <option value="php">PHP</option>
     <option value="c#">Csharp</option>
     <option value="java">Java</option>
     <option value="node">Node.js</option>
   </select>
   
    <script>
        function getSelectValue()
        {
            var selectedValue = document.getElementById("list").value;
            alert(selectedValue);
        }
        getSelectValue();
    </script>
 </body>
Posted by: Guest on June-12-2020
2

use js to get select value

// reference to 'scripts' select list 
// used throughout the examples below
var sel = document.getElementById('scripts');

// display value property of select list (from selected option)
console.log( sel.value );
Posted by: Guest on February-22-2020
0

js select option value when selected

(function() {
    
    // get references to select list and display text box
    var sel = document.getElementById('scripts');
    var el = document.getElementById('display');


    function getSelectedOption(sel) {
        var opt;
        for ( var i = 0, len = sel.options.length; i < len; i++ ) {
            opt = sel.options[i];
            if ( opt.selected === true ) {
                break;
            }
        }
        return opt;
    }

    // assign onclick handlers to the buttons
    document.getElementById('showVal').onclick = function () {
        el.value = sel.value;    
    }
    
    document.getElementById('showTxt').onclick = function () {
        // access text property of selected option
        el.value = sel.options[sel.selectedIndex].text;
    }

    document.getElementById('doLoop').onclick = function () {
        var opt = getSelectedOption(sel);
        el.value = opt.value;
    }
    
}());
// immediate function to preserve global namespace
Posted by: Guest on December-27-2020
0

js select option value

// other.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Change on value select</title>
  </head>
  <body>
    <span class="wpcf7-form-control-wrap Profession"
      ><select name="Profession" class="select" aria-invalid="false">
        <option value="Nurse">Nurse</option>
        <option value="Doctor">Doctor</option>
        <option value="Lawyer">Lawyer</option>
        <option value="Accountant">Accountant</option>
        <option value="Developer">Developer</option>
        <option value="Architect">Architect</option>
        <option value="Other">Other</option>
      </select></span
    >
    <div class="other_role"><h1>It works!!!</h1></div>
    <script src="other.js"></script>
  </body>
</html>


/* other.js - hide the div with the class 'other_role' 
 * and display it when the user selects 'other' from the options 
 * you can display anything you like and feel free to refactor the code
*/
document.querySelector(".other_role").style.display = "none";

let roleOptionSelect = document.querySelector(".select");

roleOptionSelect.addEventListener("change", function () {
  if (roleOptionSelect.value === "Other") {
    console.log(roleOptionSelect.value);
    document.querySelector(".other_role").style.display = "block";
  } else {
    console.log("Meh!!!");
    document.querySelector(".other_role").style.display = "none";
  }
});
Posted by: Guest on August-31-2021

Code answers related to "js select selected value"

Code answers related to "Javascript"

Browse Popular Code Answers by Language