web-dev-qa-db-fra.com

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

Comment pourrais-je déterminer si l'élément renvoyé 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 chaque (la zone de texte renvoie la valeur du texte, la sélection renvoie 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>

et ensuite 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());

        });
jqueryjquery-selectors
84
ajberry

Vous pourriez faire ceci:

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

ou ce 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
}
157
user113716

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

voici un exemple de code pour la case à cocher

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 }
28
Rohit

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");
}
3
Umesh Patil