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

如何确定 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>

然后是剧本:

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


});

124469 次浏览

小开

最佳答案

You could do this:

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

or this, which is slower, but shorter and cleaner:

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

If you want to be more specific, you can test the type:

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

小开

alternatively you can retrieve DOM properties with .prop

here is sample code for select box

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


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

for textbox

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

小开

If you just want to check the type, you can use jQuery's .is() function,

Like in my case I used below,

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