Getting Selected Values from Dropdown Inside Table

How do I select a value in a dropdown inside a table?

Consider you have below table markup

        <table id="tblData">
            <tr>
                <td>
                    <select>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select></td>
            </tr>
            <tr>
                <td>
                    <select>
                        <option value="21">21</option>
                        <option value="22">22</option>
                    </select></td>
            </tr>
            <tr>
                <td>
                    <select>
                        <option value="31">31</option>
                        <option value="32">32</option>
                    </select></td>
            </tr>
            <tr>
                <td>
                    <select>
                        <option value="41">41</option>
                        <option value="42" selected="selected">42</option>
                    </select></td>
            </tr>
        </table>

You can loop through each row and find the selected value.

       // loop through each row.
       $("#tblData tr").each(function () {
            // find the select tag and get its selected value.
            $(this).find("select").val();
        });

This way you can further achieve your functionality, above code shows how to target different dropdown in separate row.

How to show Selected value from dropdown inside table in dot net core mvc with jquery

If you want to set selected option of <select></select> which id is dropdowntype,you only need to change cols,and then add cols to html.

var cols = "";

            cols += '<select id="dropdowntype"  class="form-control">';
            for (var j = 1; j <= 2; j++) {
                if (j == List.periodstatus) {
                    cols += '<option value="' + j + '" selected>Open </option>';
                } else {
                    cols += '<option value="' + j + '">Open </option>';
                }
            }
            cols += '</select >';

After using the code,selected will added to the option which value is List.periodstatus in cols.

Get value of selected dropdown in table cell using jquery

You can try this:

$('#orders').on('change', '.dropdown_select' , function () {
     console.log("value is " + $(this).find(":selected").val());
});

Big benefit of this way is if you add new rows to your table later (dynamically), this still works fine.

You can try this online or change it and look at the result.

Why your code not working fine??

Because $(".dropdown_select").closest(...) returns all .dropdown_select elements and when you call .closest(..) on it, jQuery returns closest of first item always.

get selected value from dropdown in a table

Try this to access dropdownlist

 UserRoleTypeId = $(this).parent().siblings().find("select").val();

Getting selected value from, dropdown list placed inside table cell

Instead of trying to find the <select> object from the table, you can give the <select> a id and use getElementById.

var selectElement = document.getElementById(selectID);
console.log(selectElement.value);
console.log(selectElement.selectedIndex);

You could also use getElementByName to find all select statements with the name "score".

var selectElement = document.getElementByName("score")[0];
console.log(selectElement.value);
console.log(selectElement.selectedIndex);

You may also want to look into JQuery for doing this as it may make things much easier for you.

Get selected value of select inside table row not working as expected

You could update your code like this

function doSomething(){
    var table, tr, td, i;

    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    console.log(tr);
    for(i = 0; i < tr.length; i++){
        td = tr[i].getElementsByTagName("td")[2];
        var e = td.getElementsByTagName("select")[0];
        alert('selected value is:' + e.options[e.selectedIndex].value);
        if(document.getElementById("cb1").checked &&  e.options[0].value == 0){
            tr[i].style.display = "none";

        }else{
            tr[i].style.display = "";
        }
    }
}

Here is updated demo
If you want to get the selected value of a dropdown, you could use its selectedIndex attribute.

By the way, we should not define multiple HTML element with same id (please check here)

Get the selected option value of dropdown in last column of row in html table Jquery

You can directly refer the select box. The following solution gives selected items from each select box. check the console value.

var rst="";$('select').each(function () {    rst+=$(this).find('option:selected').text()+" ";});console.log(rst);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table class="table table-hover"><thead>  <tr>    <th>Firstname</th>    <th>Lastname</th>    <th>Email</th>    <th>Invite Status</th>  </tr></thead><tbody>  <tr>    <td>John</td>    <td>Doe</td>    <td>john@example.com</td>    <td><select class="form-control"><option value="Invitee" selected="selected">Invitee</option><option value="Alternate">Alternate</option></td>  </tr>
  <tr>    <td>John</td>    <td>Doe</td>    <td>john@example.com</td>    <td><select class="form-control"><option value="Invitee" >Invitee</option><option selected="selected" value="Alternate">Alternate</option></td>  </tr>
  <!-- and so on ... Built Dynamically -->
</tbody>

html += '<td contenteditable class="positionID"><select class="positionList"><option></option></select>';

var position_ID = $(this).parents('tr').find('.positionList').val();