{"id":2006,"date":"2013-01-18T04:55:05","date_gmt":"2013-01-18T04:55:05","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=2006"},"modified":"2013-01-18T04:55:05","modified_gmt":"2013-01-18T04:55:05","slug":"jquery-select-option-count-get-select-options-count-using-jquery-example","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-select-option-count-get-select-options-count-using-jquery-example\/","title":{"rendered":"jQuery Select Option Count Example"},"content":{"rendered":"<p>While dealing with Select dropdown in a form, at times, it might be desirable to <strong>get count of select options<\/strong> for further processing. Now this is possible using the Server Side Programming\u00a0language\u00a0that you use but we will need to reload the page. And we want to avoid reloading the page. So in this article, I am going to share with you, <em><strong>how to get select options count using jQuery<\/strong><\/em> by means of a really simple example. So read on to find out more.<\/p>\n<p><!--more--><\/p>\n<h2>How to Get Select Options Count Using jQuery<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2006\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>In<strong> jQuery, Select Option Count<\/strong> refers to the sum of all the options available in that specific select dropdown. So to <strong>get the select options count using jQuery<\/strong>, let us assume that we have couple of select dropdowns in our form. One of the select dropdown contains list of cities &amp; the other\u00a0select dropdown contains list of states. So let&#8217;s see how to get the count of each of these select dropdowns when a button is clicked, using jQuery.<\/p>\n<h3>Example: Get Select Option Count using jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example\">&lt;form name=\"form1\" method=\"post\" action=\"\"&gt;\n  &lt;p&gt;\n    &lt;label for=\"states\"&gt;States&lt;\/label&gt;\n    &lt;select name=\"states\" id=\"states\"&gt;\n      &lt;option value=\"USA\"&gt;USA&lt;\/option&gt;\n      &lt;option value=\"UK\"&gt;UK&lt;\/option&gt;\n    &lt;\/select&gt;\n    &lt;label for=\"cities\"&gt;Cities&lt;\/label&gt;\n    &lt;select name=\"cities\" id=\"cities\"&gt;\n      &lt;option value=\"AL\" selected=\"selected\"&gt;AL&lt;\/option&gt;\n      &lt;option value=\"TX\"&gt;TX&lt;\/option&gt;\n      &lt;option value=\"CA\"&gt;CA&lt;\/option&gt;\n      &lt;option value=\"NY\"&gt;NY&lt;\/option&gt;\n    &lt;\/select&gt;\n  &lt;\/p&gt;\n  &lt;p&gt;\n    &lt;input type=\"submit\" name=\"get_select_option_count_for_states\" id=\"get_select_option_count_for_states\" value=\"Get States Count\"&gt;\n    &lt;input type=\"submit\" name=\"get_select_option_count_for_cities\" id=\"get_select_option_count_for_cities\" value=\"Get Cities Count\"&gt;\n  &lt;\/p&gt;\n&lt;\/form&gt;\n&lt;script type=\"text\/javascript\"&gt;\n\n$('#get_select_option_count_for_states').click(function(e) {\n\n\talert('Number of States: ' + $(\"#states option\").length );\n\n\te.preventDefault();\n\n});\n\n$('#get_select_option_count_for_cities').click(function(e) {\n\n\talert('Number of Cities: ' + $(\"#cities option\").length );\n\n\te.preventDefault();\t\n\n});\n&lt;\/script&gt;<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2006\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h4>That&#8217;s it!<\/h4>\n<p>Do you know of any other ways to <em><strong>get select option count using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While dealing with Select dropdown in a form, at times, it might be desirable to get count of select options for further processing. Now this is possible using the Server Side Programming\u00a0language\u00a0that you use but we will need to reload the page. And we want to avoid reloading the page. So in this article, I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,41],"class_list":["post-2006","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-wm","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=2006"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2006\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=2006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=2006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=2006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}