title: Iterating through a custom UL LI A list and isolating only items that have the selected classname attributed to them
body: <p>I need your help,</p>
  
  <p>Similar to what the code does below for multi-select boxes that are selected, how can I create a new function that would iterate through my custom UL LI A list and isolating only items that have the "selected" classname attributed to them:</p>
  
  <pre><code>var sel = document.getElementById('selectbox');        
  c = 1
  
  for (var i=0, len=sel.options.length; i&lt;len; i++) {    
      if (sel.options[i].selected) {              
          alert(sel.options[i].value)
          c++         
      }
  }
  </code></pre>
  
  <p>Here is the HTML, CSS and Javascript:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
  
          .dropdown dd, .dropdown dt, .dropdown ul {
              margin:0px;
              padding:0px;
          }
          .dropdown dd {
              position:relative;
          }
          .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
  
          .dropdown a:hover { color:#000;}
  
          .dropdown dt a:hover, .dropdown dt a:focus {
              border: 1px solid rgb(128,128,128);
          }
  
          .dropdown dt a {
              background:#e4dfcb url(arrow.png) no-repeat scroll right center;
              display:block;
              padding-right:20px;
              border:1px solid rgb(170,170,170);
              width:150px;
          }
          .dropdown dt a span {
              cursor:pointer;
              display:block;
              padding:5px;
          }
          .dropdown dd ul {
             background:#e4dfcb none repeat scroll 0 0;
             border:1px solid rgb(170,170,170);
  
             display:none;
             left:0px;
             padding:5px 0px;
             position:absolute;
             top:2px;
             width:auto;
             min-width:170px;
             list-style:none;
         }
          .dropdown span.value { display:none;}
          .dropdown dd ul li a { padding:5px; display:block;}
          .dropdown dd ul li a:hover { background-color:#d0c9af;}
  
          .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
          .selected{
              background-color:#d0c9af;
          }
  
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
      /*
                      $(".dropdown dt a span").html(text);
                  $(".dropdown dd ul").hide();
                  $("#result").html("Selected value is: " + getSelectedValue("sample"));
  
  */
          $(document).ready(function() {
  
              $(".dropdown dt a").click(function() {
                  $(".dropdown dd ul").toggle();
              });
  
              $(".dropdown dd ul li a").click(function(e) {
                  var text = $(this).html();
  
                  if (e.ctrlKey) {
  
                      $(this).addClass('selected');
  
                  }
                  else {
                      var text = $(this).html();
                      $(".dropdown dd ul li a").removeClass('selected');
                      $(this).addClass('selected');
                      $(".dropdown dt a span").html(text);
                      $(".dropdown dd ul").hide();
                  }
  
  
              });
  
              function getSelectedValue(id) {
                  return $("#" + id).find("dt a span.value").html();
              }
  
              $(document).bind('click', function(e) {
                  var $clicked = $(e.target);
                  if (! $clicked.parents().hasClass("dropdown"))
                      $(".dropdown dd ul").hide();
              });
  
  
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;dl id="sample" class="dropdown"&gt;
          &lt;dt&gt;&lt;a href="#"&gt;&lt;span&gt;Please select the country&lt;/span&gt;&lt;/a&gt;&lt;/dt&gt;
          &lt;dd&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Brazil&lt;span class="value"&gt;BR&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;France&lt;span class="value"&gt;FR&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Germany&lt;span class="value"&gt;DE&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;India&lt;span class="value"&gt;IN&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Japan&lt;span class="value"&gt;JP&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Serbia&lt;span class="value"&gt;CS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;United Kingdom&lt;span class="value"&gt;UK&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;United States&lt;span class="value"&gt;US&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/dd&gt;
      &lt;/dl&gt;
      &lt;span id="result"&gt;&lt;/span&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>