In this post, we will discuss the various method in jQuery and JavaScript to get value selected in DropDown. In Javascript, it becomes a bit tricky to fetch selected values, but in jQuery, we have some predefined and easy methods to fetch values from form fields like drop down.

Let’s explore some of the best ways to get Selected Value and Option Text in JavaScript and jQuery

JavaScript Method:

Method to get Selected Value from a select box:

HTML

<select id="singleSelectValueDDJS" class="form-control"
                    onchange="singleSelectChangeValue()">
  <option value="0">Select Value 0</option>
  <option value="8">Option value 8</option>
  <option value="5">Option value 5</option>
  <option value="4">Option value 4</option>
</select>

<input type="text" id="textFieldValueJS" class="form-control"
                    placeholder="get value on option select">

JavaScript

    function singleSelectChangeValue() {
        //Getting Value
        //var selValue = document.getElementById("singleSelectDD").value;
        var selObj = document.getElementById("singleSelectValueDDJS");
        var selValue = selObj.options[selObj.selectedIndex].value;
        //Setting Value
        document.getElementById("textFieldValueJS").value = selValue;
    }

Method to get Selected Value Option Text from a select box:

HTML

    <select id="singleSelectTextDDJS" class="form-control"
        onchange="singleSelectChangeText()">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

    <input type="text" id="textFieldTextJS" class="form-control" 
    placeholder="get value on option select">

JavaScript

    function singleSelectChangeText() {
        //Getting Value
        

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

jQuery Method:

Method to get Selected Value from a select box:

HTML

    <select id="singleSelectValueDDjQuery" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

    <input type="text" id="textFieldValueJQ" class="form-control"
        placeholder="get value on option select">

jQuery

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

Method to get Selected Value Option Text from a select box:

HTML

    <select id="singleSelectTextDDjQuery" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

    <input type="text" id="textFieldTextJQ" class="form-control"
                    placeholder="get value on option select">

jQuery

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

See working demo link here

яндекс