Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 3

Posted by Fatih Hamzah
Fatih Hamzah
8,666 Points

Does .val("something") equal to .prop("value", "something") ?

As the question.. Does .val("something") equal to .prop("value", "something") ? Do they interchangeable?

3 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

.val() is used to either get the properties or set the properties of elements like input, select, textarea...etc. So when you enter something into a text box you would use val() to get that or to set the value of a similar type field.

Here we would be setting the value of specific selectors. This would deal with the text or value of those selectors

$( "#single" ).val( "Single2" );
$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
$( "input").val([ "check1", "check2", "radio1" ]);

.prop() is used to find out the value of a property. It really seems to deal more with boolean type properties like whether a checkbox is checked or not and, would return true if checked or false if not checked. That would be an example of get. You can set properties for example to disable check boxes by passing in disabled: true.

Here we are setting how a given input will start. In the first case, we are allowing something to be useable with disabled false, like a series of checkboxes or radio buttons. In the second, we are starting with a check in a given box. 

$( "input" ).prop( "disabled", false );
$( "input" ).prop( "checked", true );

So the two function differently and are used for different types of elements.

Fatih Hamzah
Fatih Hamzah
8,666 Points

I see, by now I understand how they differently used.

One question to your example of .val() why there is an array inside the val function? what's that array intending to do?

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

:point_right: The .val() method has a few extra tricks up its sleeve.

One case that comes to mind is that when you use it on a select element it does not change the value attribute of the element, but instead changes the checked property of the option elements inside it.

Check the jQuery API page for details.

Alexander Davison
Alexander Davison
65,469 Points
Alexander Davison
Alexander Davison
65,469 Points

Hmmm.... I really don't know! All I know is that you can always look it up in the search bar to find Google results, and also Stackoverflow (www.stackoverflow.com) is a large popular website for asking questions or looking for answers like this. :smile:

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Here there is a select menu. Notice that even though Multiple and Mulitple3 are given the option selected. The script is setting mulitple2 and multiple3 to start already chosen. You can see it on the bottom of the api for val()

<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>

<script>
$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
</script>

http://api.jquery.com/val/