How to get the selected value of dropdownlist inside a table cell using JavaScript?

Question

I have an HTML element like this:

<td>
    <select>
        <option value="Polygon 47">Polygon 47</option>
        <option value="Polygon 49">Polygon 49</option>
    </select>
</td>

How can I access the currently selected value with JavaScript?

when do you want to access? on option change or on button click? — Bharadwaj, Mar 18 '14 at 13:16
When I call a different function (is called when I hit the a button), I want to select the currently set value. — ustroetz, Mar 18 '14 at 13:17
There is a lot of work for this without having id for the dropdown. Find one parent element with `id` property, and then find the containing elements by accessing `childNodes` property of that element in `javascript`. You need to do this until you get the required element. **OR** use `jquery` which would be lot easier that javascript in this case. — Bharadwaj, Mar 18 '14 at 13:33

score 0 · Answer 1 · answered Mar 18 '14 at 13:30

0

I solved it by using getElementsByTagName.

        var e = cell.getElementsByTagName("select")[0];
        var myValue = e.options[e.selectedIndex].value);

answered Mar 18 '14 at 13:30

ustroetz

5,802
16
47
74

score -1 · Answer 2 · answered Mar 18 '14 at 13:11

-1

Solution:

<select id="shape">
<option value="Polygon 47">Polygon 47</option>
<option value="Polygon 49">Polygon 49</option>
</select>

<script type="text/javascript">
$(document).ready(function () {

    $('#shape').change(function(){
    var shapeId = document.getElementById("shape");
    var shapeChosen = shapeId.options[shapeId.selectedIndex].value;
    //Now use 'shapeChosen' wherever you want. 'shapeChosen' will give you the selected item.
   });
});
</script>

answered Mar 18 '14 at 13:11

Aniruddha Pondhe

1,830
3
17
30

The question is about doing it in JS and NOT jQuery! – lshettyl Mar 18 '14 at 13:13
Using jQuery is a better option! – Aniruddha Pondhe Mar 18 '14 at 13:54
One would not simply have a website with just a select box! – Aniruddha Pondhe Mar 19 '14 at 07:14
it doesn't mean you can't have a site with no jQuery! – lshettyl Mar 19 '14 at 10:06
That's why is said jQuery is a 'better' option. I did not say the 'only' option. – Aniruddha Pondhe Mar 19 '14 at 10:48

score -1 · Answer 3 · answered Mar 18 '14 at 13:12

-1

<select id="test">
<option value="Polygon 47">Polygon 47</option>
<option value="Polygon 49">Polygon 49</option>
</select>

$("#test").change(function() {alert($("#test option:selected").val())})

answered Mar 18 '14 at 13:12

Branden Tanga

174
5

Well, if we're going to get downvoted for trying to help, I'll move on then. Best of luck with finding a solution. – Branden Tanga Mar 18 '14 at 13:25

How to get the selected value of dropdownlist inside a table cell using JavaScript?

3 Answers3