Question 35499 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can someone please explain the purpose of .val("-") in the statement? – Jquery

Can someone please explain the purpose of .val("-") in the statement?

Are we assigning the change event to dropdowns where value="-" in the following code? and what is the purpose of adding $tbApplications in the change function?

$tbApplications = $("#tbApplications");

$("select", $tbApplications).val("-").on("change", function () {
 .....
});
<table style="border-collapse:collapse; width:100%" id="tblApplications">
   <tbody id="tbApplications">
      <tr id="trApplication_10147658" data-applicationid="10147658">
         <td class="tcenter" data-applicationid="10147658" data-reviewerid="87848165" data-placement="bottom" data-toggle="popover" data-content="<strong>Name:</strong> Hachem, Ramsey<br><strong>Institution:</strong> Washington University<br><strong>Title:</strong> Isolation of Pseudomonas aeruginosa from Respiratory Specimens after Lung Transplantation and the Development of Chronic Lung Allograft Dysfunction" data-original-title="" title="" style="width: 50px; box-sizing: border-box;">
            <select class="form-control form-control-sm" id="optRole_87848165_10147658" data-originalrole="18430" data-oprid="2013738" data-applicationid="10147658" data-reviewerid="87848165">
               <option value="-">-</option>
               <option value="18417">B</option>
               <option value="18414">1</option>
            </select>
         </td>        
      </tr>
      <tr id="trApplication_10147470" data-applicationid="10147470">
         <td class="tcenter" data-applicationid="10147470" data-reviewerid="87848165" data-placement="bottom" data-toggle="popover" data-content="<strong>Name:</strong> Morrell, Eric<br><strong>Institution:</strong> University of Washington<br><strong>Title:</strong> Identifying Lung and Plasma Molecular Determinants for CLAD after Respiratory Viral Infection" data-original-title="" title="" style="box-sizing: border-box;">
            <select class="form-control form-control-sm" id="optRole_87848165_10147470" data-originalrole="18432" data-oprid="2070118" data-applicationid="10147470" data-reviewerid="87848165">
               <option value="-">-</option>
               <option value="18417">B</option>
               <option value="18414">1</option>
            </select>
         </td>        
      </tr>
   </tbody>
</table>
Tags:

2

Answers


  1. 0

    jQuery implements a fluent interface, which means that methods that aren’t used specifically to look up a value return the object(s) they were called on. This allows you to chain methods together to perform multiple operations on the same elements. So

    $("select", $tbApplications).val("-").on("change", function () {
 .....
});

    is equivalent to:

    let temp = $("select", $tbApplications);
temp.val('-');
temp.on("change", function () {
 .....
});

    temp is the collection of all select elements inside #tbApplications. This sets all their values to -, and then adds a change listener to all of them.

    The second argument to $() is the context in which to search for the selector in the first argument. $(selector, context) is equivalent to context.find(selector) or $(context).find(selector) depending on whether context is a jQuery object or something else.

    Login or Signup to reply.
  2. 0

    jQuery documentation we can use $() with following parameter

    jQuery( selector [, context ] )

    selector
    A string containing a selector expression

    context
    A DOM Element, Document, jQuery or selector to use as context

    Selector Context
    By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function. For example, to do a search within an event handler, the search can be restricted like so:

    $( "div.foo" ).click(function() {
  $( "span", this ).addClass( "bar" );
});

    When the search for the span selector is restricted to the context of this, only spans within the clicked element will get the additional class.

    Internally, selector context is implemented with the .find() method, so

    $( "span", this )

    is equivalent to $( this ).find( "span" ).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search