jQuery - xác định xem phần tử đầu vào là hộp văn bản hay danh sách chọn

Làm cách nào để xác định xem phần tử được trả về bởi bộ lọc: input trong jQuery là hộp văn bản hay danh sách chọn?

Tôi muốn có một hành vi khác nhau cho mỗi (hộp văn bản trả về giá trị văn bản, chọn trả về cả khóa và văn bản)

Thiết lập ví dụ:

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

và sau đó là tập lệnh:

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

        });

Bạn có thể làm điều này:

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

hoặc cái này, chậm hơn, nhưng ngắn hơn và sạch hơn:

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

Nếu bạn muốn cụ thể hơn, bạn có thể kiểm tra loại:

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

hoặc bạn có thể truy xuất các thuộc tính DOM bằng .prop

đây là mã mẫu cho hộp chọn

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

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

cho hộp văn bản

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

Nếu bạn chỉ muốn kiểm tra kiểu, bạn có thể sử dụng hàm .is () của jQuery,

Giống như trong trường hợp của tôi mà tôi đã sử dụng bên dưới,

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