jQuery - Bestimmen Sie, ob das Eingabeelement ein Textfeld oder eine Auswahlliste ist

Wie würde ich feststellen, ob das von einem: Eingabefilter in jQuery zurückgegebene Element ein Textfeld oder eine Auswahlliste ist?

Ich möchte für jedes ein anderes Verhalten haben (Textfeld gibt Textwert zurück, Auswahl gibt sowohl Schlüssel als auch Text zurück)

Beispielaufbau:

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

und dann das Skript:

$('#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());

        });

Sie könnten dies tun:

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

oder das, was langsamer, aber kürzer und sauberer ist:

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

Wenn Sie genauer sein möchten, können Sie den Typ testen:

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

Alternativ können Sie DOM-Eigenschaften mit abrufen .prop

Hier ist ein Beispielcode für das Auswahlfeld

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

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

für Textfeld

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

Wenn Sie nur den Typ überprüfen möchten, können Sie die .is () -Funktion von jQuery verwenden.

Wie in meinem Fall, den ich unten verwendet habe,

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