CODEWITHSUNDEEP
javascriptjquery
Developer
Developer

Reputation: 888

How to get count of all elements which are in dropdown list using jquery

I have dropdown list like

 <select id="ddlProjects">
   <option value="315">resproject</option>
   <option value="320" style-"display:inline">newheavn</option>
   <option value="395" style="display:inline">cealon sales</option>
   <option value="395" style="display:inline">cealon sales</option>
 </select>

Now , I want count of all elements which are "display:inline" on change, how can i get it.

Upvotes: 1

Views: 657

Answers (4)

Mourice
Mourice

Reputation: 597

$('#ddlProjects option').filter(function() {
    return $(this).css('display') === 'inline';
}).length;

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Use attribute selector in jquery to get length of the options in dropdownlist

    $('#ddlProjects').change(function(){
    var len = $(this).find('option[style="display:inline"]').length
    console.log(len)
   });

DEMO

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20636

By default the display property of <option> is set to inline

If you still need to filter according to this property, use this,

$('#ddlProjects').change(function(){
    var count = $('option',this).filter(function(){
        var css =$(this).attr('style');
        return css !=undefined && css.indexOf('display:inline')>-1;
    }).length;
    console.log(count);
});

Demo

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to use .filter() at this context,

$('#ddlProjects').change(function(){
  var count = $(this).children().filter(function(){
    return $(this).css('display') === "inline" 
  }).length;
  console.log(count);
})

Try to use attribute contains selector at this situation, since the default display property of an option element is inline.

$('#ddlProjects').change(function(){
    var count = $('option[style*="display:inline"]',this).length;
    console.log(count);
});

DEMO

Upvotes: 0

Related Questions