jQuery - How to pass 'this' to a function?

Question

How do I pass $(this) into a function. In my example below I want to populate the address textbox with the value of the selected drop-down option label but only if the value selected is not empty.

The following doesn't work?

$("#AddressId").change(function () {
  $("#Address").val(function(index, val) {
      val = $(this).val();
      return val === "" ? "" : $('option:selected', this).text();
  }, this).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="AddressId">
 <option value="">-- Please select --</option>
 <option value="1">xyz street</option>
 ...
</select>

<input id="Address" name="Address" value="" type="text">

Rory McCrossan · Accepted Answer · 2017-03-31T15:17:59.007

To achieve this store the this reference of #AddressId in a variable the change event handler. You can then use that variable in the inner val() function, like this:

$("#AddressId").change(function() {
  var $addressId = $(this);
  
  $("#Address").val(function(index, val) {
    val = $addressId.val();
    return val === "" ? "" : $('option:selected', $addressId).text();
  }, this).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="AddressId">
   <option value="">-- Please select --</option>
   <option value="1">xyz street</option>
 </select>

<input id="Address" name="Address" value="" type="text">

Although note that the function you provide to val() is not required, and is the cause of your problem. You can simplify the code to just this:

$("#AddressId").change(function() {
  var address = $(this).val() ? $(this).find('option:selected').text() : '';      
  $("#Address").val(address).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="AddressId">
   <option value="">-- Please select --</option>
   <option value="1">xyz street</option>
 </select>

<input id="Address" name="Address" value="" type="text">

Does OP wants it to work this way? I guess he doesn't want to change the inputs value if the selected option value is empty. — kind user, Mar 31 '17 at 15:17
His current logic wipes out the value when selecting the first option, so I simply followed that. — Rory McCrossan, Mar 31 '17 at 15:19

kind user · Answer 2 · 2017-03-31T15:24:38.103

I bet you have just overcomplicated it.

$("#AddressId").change(function() {
  if ($(this).val()) {
    $('#Address').val($(this).find('option:selected').text());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="AddressId">
   <option value="">-- Please select --</option>
   <option value="1">xyz street</option>
   ...
 </select>

<input id="Address" name="Address" value="" type="text">

score 0 · Answer 3 · answered Mar 31 '17 at 15:17

You could simply add a condition selected_value != "" then assign the selected value if isn't empty :

$("#AddressId").change(function () {
    var selected_value = $(this).val();

    if( selected_value != ""){
        $("#Address").val( selected_value );
   }
});

Hope this helps.

$("#AddressId").change(function () {
  var selected_value = $(this).val();

  if( selected_value != ""){
      $("#Address").val( selected_value );
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="AddressId">
 <option value="">-- Please select --</option>
 <option value="1">xyz street</option>
 <option value="2">abc street</option>
 <option value="3">def street</option>
</select>

<input id="Address" name="Address" value="" type="text">

jQuery - How to pass 'this' to a function?

3 Answers3