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

Lesezeit: 2 Minuten

Wie würde ich feststellen, ob das von einem :input-Filter 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 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());

        });

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
}

  • Ich musste die jquery-Syntax $(element).is(‘input’) hinzufügen, damit es funktioniert, aber alles in allem großartig.

    – Beobachter

    29. März 2016 um 9:23 Uhr

Benutzer-Avatar
Rohit

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 }

  • Dies funktioniert wie ein Zauber mit der neuen jQuery-Funktion prop(). Vielen Dank.

    – Thomas.Benz

    27. März 2018 um 14:17 Uhr

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

Wie in meinem Fall habe ich unten verwendet,

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

1308290cookie-checkjQuery – Bestimmen Sie, ob das Eingabeelement ein Textfeld oder eine Auswahlliste ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy