How to Get Selected Value in DropDown List using jQuery JavaScript?

<-- Back to tutorial

JavaScript

Get Selected Value

    function singleSelectChangeValue() {
        //Getting Value
        
        // METHOD 1
        var selValue = document.getElementById("singleSelectDD").value;
        
        //METHOD 2
        var selObj = document.getElementById("singleSelectDD");
        var selValue = selObj.options[selObj.selectedIndex].value;
        
        //Setting Value
        document.getElementById("textFieldValueJS").value = selValue;
    }
    
Get Selected Value Text
    
    function singleSelectChangeText() {
        //Getting Value
        

        var selObj = document.getElementById("singleSelectTextDDJS");
        var selValue = selObj.options[selObj.selectedIndex].text;
        
        //Setting Value
        document.getElementById("textFieldTextJS").value = selValue;
    }
    

jQuery

Get Selected Value

    $("#singleSelectValueDDjQuery").on("change",function(){
        //Getting Value
        var selValue = $("#singleSelectValueDDjQuery").val();
        //Setting Value
        $("#textFieldValueJQ").val(selValue);
    });   
    
Get Selected Text

    $("#singleSelectTextDDjQuery").on("change",function(){
        //Getting Value
        var selValue = $("#singleSelectTextDDjQuery :selected").text();
        //Setting Value
        $("#textFieldTextJQ").val(selValue);
    });