jQuery - 确定输入元素是文本框还是选择列表

Question

如何确定 jQuery 中 :input 过滤器返回的元素是文本框还是选择列表？

我希望每个都有不同的行为（文本框返回文本值，选择返回键和文本）

示例设置：

<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>
</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());

        });

Answer 1

您可以这样做：

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
}

Answer 2

或者你可以检索 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 }

Answer 3

如果你只想检查类型，你可以使用 jQuery 的 .is() 函数，

就像我下面使用的例子一样，

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

Answer 4

您可以使用以下代码确定表单元素是输入还是选择：

$('ElementSelector').prop('tagName').toLowerCase();