jQuery - determine if input element is textbox or select list

Question

How would I determine whether the element returned by an :input filter in jQuery is a textbox or select list?

I want to have a different behavior for each ( textbox returns text value, select returns both key and text)

Example setup:

<div id="InputBody"> <div class="box">     <span id="StartDate">         <input type="text" id="control1">     </span>     <span id="Result">         <input type="text" id="control2">     </span>     <span id="SelectList">         <select>             <option value="1">Option 1</option>             <option value="2">Option 2</option>             <option value="3">Option 3</option>         </select>     </span> </div> <div class="box">     <span id="StartDate">         <input type="text" id="control1">     </span>     <span id="Result">         <input type="text" id="control2">     </span>     <span id="SelectList">         <select>             <option value="1">Option 1</option>             <option value="2">Option 2</option>             <option value="3">Option 3</option>         </select>     </span> </div> 

and then the script:

$('#InputBody')     // find all div containers with class = "box"     .find('.box')     .each(function () {         console.log("child: " + this.id);          // find all spans within the div who have an id attribute set (represents controls we want to capture)         $(this).find('span[id]')         .each(function () {             console.log("span: " + this.id);              var ctrl = $(this).find(':input:visible:first');              console.log(this.id + " = " + ctrl.val());             console.log(this.id + " SelectedText = " + ctrl.find(':selected').text());          }); 

Answer 1

You could do this:

if( ctrl[0].nodeName.toLowerCase() === 'input' ) {     // it was an input } 

or this, which is slower, but shorter and cleaner:

if( ctrl.is('input') ) {     // it was an input } 

---

If you want to be more specific, you can test the type:

if( ctrl.is('input:text') ) {     // it was an input } 

Answer 2

alternatively you can retrieve DOM properties with .prop

here is sample code for select box

if( ctrl.prop('type') == 'select-one' ) { // for single select }  if( ctrl.prop('type') == 'select-multiple' ) { // for multi select } 

for textbox

  if( ctrl.prop('type') == 'text' ) { // for text box }