11

I have a form in html that contains a drop down menu like so

<form name= "gadget_selector">
    <select name= "gadget">
        <option value = 0> Something </option>
        <option value = 1> Something else </option>
        //etc..
    </select> 
</form>

And I want to access the value of the selected option in a javascript function like so

function someFunction(){

    //var option = value of selected menu option
}

How would I do this?

Zack
  • 13,454
  • 24
  • 75
  • 113
  • Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) – totymedli Jan 11 '17 at 22:48

7 Answers7

15
var option = document.getElementById('gadget').value;

Set gadget as the id for the select as well, like this:

<select id="gadget" name="gadget">
        <option value = 0> Something </option>
        <option value = 1> Something else </option>
        //etc..
    </select>
Ayush
  • 41,754
  • 51
  • 164
  • 239
2

assign id to select box "gadget":

   <select name= "gadget" id="gadget">
    <option value = 0> Something </option>
        <option value = 1> Something else </option>
        //etc..
    </select>

Now get selected value in javascript like below : 

function GetSelectedItem() {

     var option = document.getElementById('gadget').value;

    }
  • I tried to do a test var option = document.getElementById('gadget').val(); alert(option); Still no go though. The first post didn't quite work either – Zack Jan 07 '12 at 06:56
  • @Zack: I checked it working ok with document.getElementById('gadget').value for me. So check your all html tags or javascript error in console. even try with simple javascript alert if that working or not. Might be Something other is conflicting –  Jan 07 '12 at 07:07
2

Include an id attribute to select element and do as below, i am sure i will work, 

var obj = document.getElementById("gadget");
alert(obj.value); // returns selected option value   (1st method)
var selectedOption = obj.options[obj.selectedIndex]; // returns selected option element
alert(selectedOption.value); // return selected option value (2nd method)

example : http://jsfiddle.net/zUBpz/

dku.rajkumar
  • 18,414
  • 7
  • 41
  • 58
0

Old question, but maybe other people get here like me so I'll add my solution:

The cleanest approach would be to have a reference to the select field, have the select backed by a model and add a watcher like this:

<script>
export default {
  name: 'MyComponent',

  data() {
    return {
      myValueName: 123
    };
  },

  watch: {
    myValueName() {
      //
      // Will log "Value: 123" and "Value: 456" instead of 
      // "123" and "456".
      //
      console.log(this.$refs['mySelectRef'].selectedOptions[0].text);
    }
  }
}
</script>

<template>
  <select ref="mySelectRef" v-model="myValueName">
    <option :value="123">Value: 123</option>
    <option :value="456">Value: 456</option>
  </select>
</template>

<style>
</style>
Alex
  • 2,398
  • 1
  • 16
  • 30
0

First, assign an id to your <select> tag.

<select id='gadget' name= "gadget">

Then, get its value

if (document.getElementById('gadget')) {
  var val = document.getElementById('gadget').value;
  alert(val);
}
Sergio Tulentsev
  • 226,338
  • 43
  • 373
  • 367
0

You can access by id, like this:=

    <form name= "gadget_selector" >
        <select name= "gadget" id='sel'>
            <option value = 0> Something </option>
            <option value = 1> Something else </option>
            //etc..
        </select> 
    </form> 


    function getvalue(){

       if(document.getElementById('sel'))
       {
         alert(document.getElementById('sel').value);
         var option = document.getElementById('sel').value;
       }

    }
Bajrang
  • 8,361
  • 4
  • 27
  • 40
0

here forms[0] is the form number starting from 0 from top to bottom of page

function someFunction(){
    var option = window.document.forms[0].gadget.value;
}
Bhavesh G
  • 3,000
  • 4
  • 39
  • 66