html - javascript selected value - Stack Overflow

admin管理员组

文章数量:1241129

            <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?

            <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?

• javascript
• html

Share Improve this question Follow edited Mar 24, 2011 at 14:18 KJYe.Name 17.2k55 gold badges5050 silver badges6363 bronze badges asked Mar 24, 2011 at 14:03 Siva Siva 3,73888 gold badges2929 silver badges2727 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 6

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);
}

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 :)

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

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);
}

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

use jQuery its much easier:

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

and use ids only once

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

ids are meant for unique element representation in a page.

you can check its live example here:
http://outsourcingnepal./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.">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>

本文标签： htmljavascript selected valueStack Overflow