CODEWITHSUNDEEP
javascripthtml
Syntax Rommel
Syntax Rommel

Reputation: 942

Getting selected values from dropdown inside table

For now I can get the selected values from the event onchange in my dropdown inside my table but it only works on the first row of my table. If I am going to change values from other rows it will still getting the value from the first row.

Here is my code:

<table class="sortable" border="1" id="table">
    <thead>
        <tr>
            <th>Employee Serial</th>
            <th>Grade</th>

        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr style="font-size:11px">
                <td>@item.empSerial</td>

                <td ALIGN="center">
                    <select onchange="getSelValue()" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
                        <option [email protected]>@item.grade1</option>
                        <option [email protected]>0</option>
                        <option [email protected]>1</option>
                        <option [email protected]>2</option>
                        <option [email protected]>3</option>
                        <option [email protected]>4</option>
                    </select>
                </td>                    

            </tr>
        }
    </tbody>
</table>

And simple script to read the selected values:

function getSelValue() {        
        alert(document.getElementById("drpTechnical").value)         
    }

Upvotes: 2

Views: 67

Answers (3)

Sumesh TG
Sumesh TG

Reputation: 2575

function getSelValue(e) {        
        alert(e.value)         
    }
<table class="sortable" border="1" id="table">
    <thead>
        <tr>
            <th>Employee Serial</th>
            <th>Grade</th>

        </tr>
    </thead>
    <tbody>

            <tr style="font-size:11px">
                <td>@item.empSerial</td>

                <td ALIGN="center">
                    <select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
                        <option [email protected]>@item.grade1</option>
                        <option [email protected]>0</option>
                        <option [email protected]>1</option>
                        <option [email protected]>2</option>
                        <option [email protected]>3</option>
                        <option [email protected]>4</option>
                    </select>
                </td>                    

            </tr>

    </tbody>
</table>

Try this.

Upvotes: 0

Buddy
Buddy

Reputation: 91

i think you made a small mistake there, the id you set to the select tag is called "drpTechnical" but in the function you try to call element with id of "getSelValue"

Try change the codes like below Code updates :

 <td ALIGN="center">
   <select onchange="getSelValue(this)" class="testerDrop" 
     style="height:20px; width:100px; text-align-last:center; cursor:pointer">
                    <option [email protected]>@item.grade1</option>
                    <option [email protected]>0</option>
                    <option [email protected]>1</option>
                    <option [email protected]>2</option>
                    <option [email protected]>3</option>
                    <option [email protected]>4</option>
                </select>
            </td>     

<script>
function getSelValue(obj) {        
    alert(obj.value)         
}
</script>

Upvotes: 0

Patrick Schocke
Patrick Schocke

Reputation: 1491

document.getElementById returns allways only the first element with this ID since IDs should be unique.

What you want is to get the id from that element that has been changed. So you need this

function getSelValue(this) {        
    alert(this.value)         
}

And your table should look like this

<td ALIGN="center">
  <select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
    <option [email protected]>@item.grade1</option>
    <option [email protected]>0</option>
    <option [email protected]>1</option>
    <option [email protected]>2</option>
    <option [email protected]>3</option>
    <option [email protected]>4</option>
  </select>
</td>

Upvotes: 1

Related Questions