jQuery-入力要素がテキストボックスか選択リストかを判断します


89

jQueryの:inputフィルターによって返される要素がテキストボックスであるか選択リストであるかをどのように判断しますか?

それぞれに異なる動作をしたい(テキストボックスはテキスト値を返し、selectはキーとテキストの両方を返す)

セットアップ例:

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

次に、スクリプト:

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

        });

回答:


167

あなたはこれを行うことができます:

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

またはこれは遅くなりますが、短くてきれいです:

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

より具体的にしたい場合は、タイプをテストできます。

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

2
それを機能させるには、jquery構文$(element).is( 'input')を追加する必要がありましたが、全体としては素晴らしいものでした。
オブザーバー

28

または、次の方法でDOMプロパティを取得できます。 .prop

これが選択ボックスのサンプルコードです

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

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

テキストボックス用

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

これは、新しいjQuery関数prop()の魅力のように機能します。ありがとう。
Thomas.Benz 2018年

8

タイプを確認したいだけの場合は、jQueryの.is()関数を使用できます。

私の場合のように、私は以下を使用しました、

if($("#id").is("select")) {
 alert('Select'); 
else if($("#id").is("input")) {
 alert("input");
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.