How do I get the selected element by name and then get the selected value from a dropdown using jQuery?

Question

I am able to find my select element by name, but I'm having trouble finding the selected value associated with it.

Here is my code below:

<select  name="a[b]" onchange='mySelectHandler("a[b]")'>
     <option value='Choice 1'>Choice 1</option>
     <option value='Choice 2'>Choice 2</option>

</select>

then, in my handler I am using:

function mySelectHandler(name){
     var mySelect = $('select[name=' + name)
     // try to get selected value
     // alert ("selected " + mySelect.val())
     console.log("object "+ mySelect.toSource());
  }

The result of my print to the log is:

object ({length:0, prevObject:{0:({}), context:({}), length:1}, context:({}), selector:"select[name=a[b]"})

Any ideas as to how to do this?

Answer 1

Your selector is a little off, it's missing the trailing ]

var mySelect = $('select[name=' + name + ']')

you may also need to put quotes around the name, like so:

var mySelect = $('select[name="' + name + '"]')

Answer 2

Try this:

$('select[name="' + name + '"] option:selected').val();

This will get the selected value of your menu.