如何通过ID判断一个元素是下拉列表元素还是文本输入元素？

Question

在JavaScript中，给定元素的“id”（以“String”格式），如何检查该元素的“id”是否指向一个下拉列表元素或文本输入元素？

如果“id”是下拉列表（“”）元素或文本输入元素，则该函数应返回“true”，否则返回“false”。

- omega

Answer 1

尝试使用以下代码：

document.getElementById('idNameGoesHere').tagName

因此，函数可以是：

function isSelectOrTextField(idName) {
    var element = document.getElementById(idName);
    if(element.tagName === 'SELECT') {return true;}
    if(element.tagName === 'INPUT' && element.type === 'text') {return true;}
    return false;
}

你可以扩展它来检查 <textarea>。

编辑： 或者选择 jbabey 的答案，因为它使用了nodeName并且格式更好。

显然，nodeName的浏览器支持更广泛。

- jfrej

---

这个的优点是它没有使用 jQuery。 - Denys Séguret

Answer 2

如果您已经包含了jQuery，您可以使用is函数：

$('#myid').is('input, select')

或者也许

$('#myid').is('input, textarea, select')

如果您想要包含文本区域，可以这样做：

或者：

$('#myid').is('input:not([type="button"]), textarea, select')

如果是文本框、下拉框或不是按钮的输入框，此函数返回true。

您可以利用jquery选择器的全部功能来调整查询以满足您的精确需求。

演示：http://jsfiddle.net/ELuEJ/（尝试更改html）

- Denys Séguret

Answer 3

你可以使用DOM元素的nodeName和type属性来确定这一点。不需要外部库。

var isSelectOrTextInput = function (element) {
    var nodeName = element.nodeName;

    return nodeName === 'SELECT' || 
        (nodeName === 'INPUT' && 
         element.type.toLowerCase() === 'text');
};

示例代码：http://jsfiddle.net/ytHQD/

- jbabey

Answer 4

$('#myId')[0].tagName

你可以检索DOM元素，然后检查标签名。

- Parv Sharma