CODEWITHSUNDEEP
javascripthtml
Siva
Siva

Reputation: 3738

javascript selected value

            <div id="selected_options">
            <select onchange="test()" id="selected_options">
            <option value="0" selected>-Select-</option>
            <option value="1">Communication</option>
            <option value="2">Hardware</option>
            </select>
    </div>

i had written a function for selected value , but when i'm doing alert of selected value it showing up undefined , the function is 

      function test() {
                    var get_id = document.getElementById('selected_options');
                    var result = get_id.options[get_id.selectedIndex].value;
                    alert(result);
                      }

any one please tell me what is the error?

Upvotes: 3

Views: 15937

Answers (7)

KoolKabin
KoolKabin

Reputation: 17653

the problem in your code is the same id => 'selected_options' for both div and combobox.

ids are meant for unique element representation in a page.

you can check its live example here:
http://outsourcingnepal.com/projects/kool.htm

code:

<script>
function test() {
        var get_id = document.getElementById('selected_options');
    var result = get_id.options[get_id.selectedIndex].value;
    alert(result);
}
</script>
<h1>Outsourcing Nepal</h1>
<a href="http://www.outsourcingnepal.com">Home</a>
<div id="selected_options1">
    <select onchange="test()" id="selected_options">
            <option value="0" selected>-Select-</option>
            <option value="1">Communication</option>
            <option value="2">Hardware</option>
    </select>
</div>

Upvotes: 0

felixsigl
felixsigl

Reputation: 2920

use jQuery its much easier:

var result = $('#selected_options option:selected').val();

and use ids only once

Upvotes: 0

KJYe.Name
KJYe.Name

Reputation: 17169

You also have two id's with selected_options. As this JSFiddle would alert:

<div id="selected_options">
    <select onchange="test()" id="selected_opt">
        <option value="0" selected>-Select-</option>
        <option value="1">Communication</option>
        <option value="2">Hardware</option>
    </select>
</div>

function test() {
    var get_id = document.getElementById('selected_opt');
    console.log(get_id);
    var result = get_id.options[get_id.selectedIndex].value;
    alert(result);
}

Upvotes: 6

JWC
JWC

Reputation: 1745

It's probably because your div and select tags have the same id.

Upvotes: 0

Dai
Dai

Reputation: 1510

To get the currently selected value you can do:

function test() {
    var get_id = document.getElementById('selected_options');
    var result = get_id.value;
    alert(result);
}

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

get_id[get_id.selectedIndex].value; "options" not required.

Upvotes: 1

dLobatog
dLobatog

Reputation: 1741

The error is here: 

get_id.options[get_id.selectedIndex].value;

It should be

get_id.value

And it will show up the selected value :)

Upvotes: 3

Related Questions