jQuery - निर्धारित करें कि इनपुट तत्व टेक्स्टबॉक्स है या सूची का चयन करें


89

मैं यह कैसे निर्धारित करूँगा कि क्या jQuery में इनपुट फ़िल्टर द्वारा दिया गया तत्व टेक्स्टबॉक्स या चुनिंदा सूची है?

मैं प्रत्येक के लिए एक अलग व्यवहार करना चाहता हूं (टेक्स्टबॉक्स पाठ मूल्य देता है, कुंजी और पाठ दोनों का चयन करता है)

उदाहरण सेटअप:

<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 सिंटैक्स $ (तत्व) .is ('इनपुट') जोड़ना था, लेकिन सभी महान में।
ऑब्जर्वर

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 फंक्शन प्रोप () के साथ एक आकर्षण की तरह काम करता है। धन्यवाद।
थॉमस।

8

यदि आप केवल प्रकार की जांच करना चाहते हैं, तो आप jQuery के .is () फ़ंक्शन का उपयोग कर सकते हैं,

जैसे मेरे मामले में मैंने नीचे इस्तेमाल किया,

if($("#id").is("select")) {
 alert('Select'); 
else if($("#id").is("input")) {
 alert("input");
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.