Question

This is a dumb question, but im stuck. Why does my first one work but not the other 3. From reading the docs, all 4 should do the job. I want to in a bigger use case get an element of a form, there could be other elements on the same page with same name inside other forms or in other divs, so the 4th option is what I really want to work. But I cant figure out why all these dont work.

http://jsfiddle.net/7vF5z/1/

html:

 <form id="filter_form_id" name="filter_form" method="get" action="/retrieved_data_records">

 <select id="brand_id" name="brands">
 <option value="0"></option>
 <option value="143272526">Brand1</option>
 <option selected="selected" value="269998788">Brand2</option>
 <option value="330516076">Brand3</option>
 <option value="330516077">Brand4</option>

 </select>
</form>

js:

 alert ("The val: " +  $('#brand_id').val() );    
 alert ("The val: " +  $('brands').val() );  
 alert ("The val: " +  $('#filter_form_id brands').val() );  
 alert ("The val: " +  $('#filter_form_id > brands').val() );  

Answer 1

Your selectors use brands as if it’s an element name. You need to use an attribute selector like [name="brands"].

Updated testcase: http://jsfiddle.net/7vF5z/3/

alert ("The val: " +  $('#brand_id').val() );    
alert ("The val: " +  $('[name="brands"]').val() );  
alert ("The val: " +  $('#filter_form_id [name="brands"]').val() );  
alert ("The val: " +  $('#filter_form_id > [name="brands"]').val() );  

---

the 4th option is what I really want to work

If that’s supposed to be a child selector, then you need to correct it by:

• Using the correct child selector syntax
• Using an attribute selector, as in my example.

There’s no real reason to use a child selector there, unless you’re going to have multiple controls with that same name value in that same form.