jQuery: determina se l'elemento di input è una casella di testo o seleziona un elenco

Come posso determinare se l'elemento restituito da un: input filter in jQuery è una casella di testo o un elenco di selezione?

Voglio avere un comportamento diverso per ciascuno (la casella di testo restituisce il valore del testo, la selezione restituisce sia la chiave che il testo)

Configurazione di esempio:

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

e poi lo 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());

        });

Potresti farlo:

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

o questo, che è più lento, ma più corto e più pulito:

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

Se vuoi essere più specifico, puoi testare il tipo:

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

in alternativa puoi recuperare le proprietà DOM con .prop

ecco il codice di esempio per la casella di selezione

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

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

per la casella di testo

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

Se vuoi solo controllare il tipo, puoi usare la funzione .is () di jQuery,

Come nel mio caso ho usato di seguito,

if($("#id").is("select")) {
 alert('Select'); 
else if($("#id").is("input")) {
 alert("input");
}