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  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  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  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  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>

CodePudding user response：

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" ).

CodePudding user response：

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.