Another 'this' question!

JavaScript
1

Another ‘this’ question !

Hi all

Sorry folks it’s another ‘this’ question, I am looking for answers but I’m stuck again.

http://www.ttmt.org.uk/this/

I have a group of drop down list that all call a function. In the function I just want to capture
the value that has been selected.

I’m always getting the first value because I need to capture ‘this’ value.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	
	<style type="text/css">
	 *{
	   margin:0;
	   padding:0;
	 }
	 #wrap{
	   margin:50px;
	 }
	</style>
</head>

<body>
  <div id="wrap">
    <form method="" action="">
      <select class="list" onchange="getList();">
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Two">Three</option>
        <option value="Two">Four</option>
      </select>
      <select class="list" onchange="getList();">
        <option value="Two-One">Two-One</option>
        <option value="Two-Two">Two-Two</option>
        <option value="Two-Two">Two-Three</option>
        <option value="Two-Two">Two-Four</option>
      </select>
      <select class="list" onchange="getList();">
        <option value="Three-One">Three-One</option>
        <option value="Three-Two">Three-Two</option>
        <option value="Three-Two">Three-Three</option>
        <option value="Three-Two">Three-Four</option>
      </select>
    </form>
  </div>

  <script type="text/javascript">

    function getList(){
      //alert($(this, '.list').val());

      alert($('.list').val());
    }

  </script>

</body>
</html>
2

It’s the inline HTML events that are getting in your way here.


<select class="list"[s][color="red"] onchange="getList();"[/color][/s]>
...
<select class="list"[s][color="red"] onchange="getList();"[/color][/s]>
...
<select class="list"[s][color="red"] onchange="getList();"[/color][/s]>



$('select.list').change(function () {
    alert(this.value);
});

Keep your scripting out of the HTML content code, and you will be fine.

3

pass ‘this’ in each of the function calls, then change your function to this (no pun intended):

function getList(el){
  console.log($(el).val());
}

Or you can drop the inline onchange in the html and do this:

$('.list').on('change', function() {
	console.log($(this).val());
});
4

Is there a benefit to using $(this).val() over this.value ?

What possible benefit can using the jQuery accessors provide in this situation?

5

If I was using vanilla JS, then I would use this.value, but in using jQuery, I would use the jQuery way $(this).val() so I can use jQuery methods if I needed to.

6

The purpose of using jQuery is to serve as a concise library that simplifies things. I don’t see how $(this).val() is a simplification of this.value
Just because a technique for it exists, doesn’t mean that the technique is better or should be used.

Having said that though, there are times when $(…).val() is appropriate, but given that the this keyword is already available not as a jQuery object, it seems needless to convert the this keyword in to a jQuery object so that you can then retrieve the jQuery val() property to obtain the value of the jQuery object that used to be the this keyword.

Using this.value avoids all of those details, with no negative consequences.

7

I don’t disagree with you, and to be honest, I have to digress the answer because I was more answering for $(this) and not $(this).val() per say.

8

Thanks paul_wilkins, that makes more sense now.

So should I always keep scripting out of the HTML?

9

Your HTML content should be kept as free as possible from having CSS or JavaScript mixed in with it.
So that’s a yes.