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

Question

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.

SideNote: A typo in line style-"display:inline"

Satpal
– Satpal

2014-06-23 09:29:12 +00:00
Commented Jun 23, 2014 at 9:29 — Satpal
– Satpal, Commented Jun 23, 2014 at 9:29
Might help you jsfiddle.net/9SMZD

Satpal
– Satpal

2014-06-23 09:32:33 +00:00
Commented Jun 23, 2014 at 9:32 — Satpal
– Satpal, Commented Jun 23, 2014 at 9:32

Sudharsan S · Accepted Answer · 2014-06-23 09:40:27Z

1

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

edited Jun 23, 2014 at 9:40

answered Jun 23, 2014 at 9:32

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaunak D · Accepted Answer · 2014-06-23 09:40:17Z

1

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

edited Jun 23, 2014 at 9:40

answered Jun 23, 2014 at 9:30

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-23 09:32:44Z

0

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

edited Jun 23, 2014 at 9:32

answered Jun 23, 2014 at 9:25

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

2 Comments

Rory McCrossan Over a year ago

This won't work as the default display of an option is inline. It will always return the total number of option elements, unless they are hidden.

Shaunak D Over a year ago

@RoryMcCrossan, you're right, facing the same problem.

Xaver Kapeller · Accepted Answer · 2014-06-23 09:54:46Z

0

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

edited Jun 23, 2014 at 9:54

Xaver Kapeller

49.9k11 gold badges100 silver badges86 bronze badges

answered Jun 23, 2014 at 9:26

Mourice

5971 gold badge5 silver badges18 bronze badges

1 Comment

Xaver Kapeller Over a year ago

Please try to flesh out your answer a bit more. Just posting a code block without any explanation or context is not good. In its current state your answer might not be of any use to people looking for an answer to this question in the future.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

DEMO

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related