设置具有相同CSS类的两个元素的值

Question

I am using same css for a select dropdown and a input textbox. I set the values in jquery like this:

$('.a').val('2');

When checking the value of the select and input elements, they are correctly assigned but when I display their values via console.log, I get undefined for both. Why is that?

console.log($('.a').find('select').val());
console.log($('.a').find('input').val());

Result:

undefined
undefined

Here's my fiddle: http://jsfiddle.net/04oLs3he/12/

Answer 1

Your selector is incorrect (no need of find ). Try following

 $('.a').val('2'); console.log($('select.a').val()); console.log($('input.a').val()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="a"> <option value="1">One</option> <option value="2">Two</option> </select> <input type="text" class="a" value="Three"> 

Answer 2

Don't use .find() to get the value, because it will search for children input / select elements inside your selected element.

And don't use the same selector to get both elements, use $('input.a') to get the input and $('select.a') to get the dropdown element:

console.log($('select.a').val());
console.log($('input.a').val());

Note:

If you want to change the input value when you change the option in the select , use the change() event to track this change.

Demo:

 $('select.a').change(function() { $('input.a').val($(this).val()); }); console.log($('select.a').val()); console.log($('input.a').val()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="a"> <option value="1">One</option> <option value="2">Two</option> </select> <input type="text" class="a" value="Three"> 

Answer 3

Try using filter instead. find will try to find child elements of the selected one unlike filter which will filter the selected elements:

 $('.a').val('2'); console.log($('.a').filter('select').val()); console.log($('.a').filter('input').val()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="a"> <option value="1">One</option> <option value="2">Two</option> </select> <input type="text" class="a" value="Three">