how to retrieve selected value from dropdown in html code example

Example 1: 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>

Example 2: javascript to get value of dropdown

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

Example 3: javascript get selected option

let selectElement = document.getElementById("selectElement");
let valueSelected = selectElement.options[selectElement.selectedIndex].value; // get selected option value
var text= selectElement.options[selectElement.selectedIndex].text; //get the selected option text

Example 4: How to select a value in a dropdown

How do you handle Select type of dropdown?
    - If it is <select> we would have to use Select class from Selenium.
    - Methods to select from dropdown:
    Select s = new Select(element);
        - s.selectByVisibleText
        - s.selectByValue
        - s.selectByIndex 
--> How do we verify which option is selected in a dropdown?
    - If we want to get the currently selected option, 
    we use getFirstSelectedOption() method.
   
        -> return type: currently selected option as a web element
--> .getOptions();
    -> This method will return all of the options in the <select> web element.
    -> return type: List<WebElement>

Tags:

Misc Example

Recent Posts