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/
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">
find will search in the html of selector element i.e. in our case, it will try and return input and select elements which have a parent element with class a. However, as there will be no element returned, .val() will return undefined. Hence, to use element with class selector, you will need to follow the approach specified.
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">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">
.filter() but it will be an overkill operation here to get all elements then filter them, the easiest way is to use select.a and input.a as you suggested in comments.
.find(). ;)
find? it makes a big difference. you needselect.aandinput.afind()as it won't be the right way to do that, however you can use.filter()but it will be an overkill operation here, the easiest way is to useselect.aandinput.aas suggested by @TemaniAfif.