jQuery - détermine si l'élément d'entrée est une zone de texte ou une liste de sélection

Comment déterminer si l'élément retourné par un filtre: input dans jQuery est une zone de texte ou une liste de sélection?

Je veux avoir un comportement différent pour chacun (la zone de texte renvoie la valeur du texte, la sélection renvoie à la fois la clé et le texte)

Exemple de configuration:

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

puis le 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());

        });

Vous pouvez faire ceci:

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

ou ceci, qui est plus lent, mais plus court et plus propre:

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

Si vous voulez être plus précis, vous pouvez tester le type:

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

vous pouvez également récupérer les propriétés DOM avec .prop

voici un exemple de code pour la boîte de sélection

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

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

pour la zone de texte

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

Si vous voulez juste vérifier le type, vous pouvez utiliser la fonction .is () de jQuery,

Comme dans mon cas, j'ai utilisé ci-dessous,

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