Posted by : Jebastin Saturday 14 December 2013

Note: 

When using "jquery.selectbox.js" plugin the "select & option" tags will be converted into "ul li" at run time. The problem is we can not get the selected value using the normal jQuery or Javascript when we use this plugin. The following solution rectifies this situation. 

Here we are going to find the 'rel' attribute value of an anchor tag which is the selected option.

HTML:

  1. <fieldset class="sapDD medium">
  2. <span class="required">*</span>
  3. <select id="Division" name="Division" sb="37042751" style="display: none;">
  4.     <option value="">Select a Division</option>
  5.     <option value="example1@gmail.com" selected="selected">example1</option>
  6.     <option value="example2@gmail.com">example2</option>
  7.     <option value="example3@gmail.com">example3</option>
  8.     <option value="example4@gmail.com">example4</option>
  9. </select>
  10. <div id="sbHolder_37042751" class="sbHolder" tabindex="0">
  11.     <a id="sbToggle_37042751" href="#" class="sbToggle"></a>
  12.     <a id="sbSelector_37042751" href="#" class="sbSelector">example1</a>
  13.     <ul id="sbOptions_37042751" class="sbOptions" style="top: 16px; max-height: 583px; display: none;">
  14.         <li><a href="#" rel="" class="">Select a Division</a></li>
  15.         <li><a href="#example1@gmail.com" rel="example1@gmail.com" class="">example1</a></li>
  16.         <li><a href="#example2@gmail.com" rel="example2@gmail.com">example2</a></li>
  17.         <li><a href="#example3@gmail.com" rel="example3@gmail.com">example3</a></li>
  18.         <li><a href="#example4@gmail.com" rel="example4@gmail.com">example4</a></li>
  19.     </ul>
  20. </div>
  21. </fieldset>

jQuery:

  1. $(document).ready(function(){
  2. var Division = $("#Division").next(".sbHolder").find("a.sbSelector").text(); ;
  3. var DivisionEmail = $("#Division").next(".sbHolder").find("ul.sbOptions").find("a:contains('" + Division + "')").attr("rel");
  4. alert(DivisionEmail);
  5. });

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Link To This Post/Page

Spread The Word

Add this button to your blog:
JJ Technology Solutions

Blog Archive

Trackers

eXTReMe Tracker
facebook

- Copyright © JJ Technology Solutions - Powered by Source Code Solutions -