Posted by : Jebastin Friday 20 December 2013

When using "jquery.selectbox.js" plugin the "select & option" tags will be converted into "ul li" at run time. In this case it's hard to hide the first option using the normal select option script. The following solution rectifies this situation.

HTML:

  1. <div class="language">
  2. <select id="language" name="language" sb="76231018" style="display: none;">
  3. <option value="0">Select Language</option>
  4. <option value="http://www.example.com/en/" page="master">English</option>
  5. <option value="http://www.example.com/fr/" page="master">French</option>
  6. <option value="http://www.example.com/es/" page="master">Spanish</option>
  7. </select>
  8. <div id="sbHolder_76231018" class="sbHolder" tabindex="0">
  9.  <a id="sbToggle_76231018" href="#" class="sbToggle"></a>
  10.  <a id="sbSelector_76231018" href="#" class="sbSelector">Select Language</a>
  11.  <ul id="sbOptions_76231018" class="sbOptions" style="display: none;">
  12.    <li><a href="#0" rel="0" class="sbFocus">Select Language</a></li>
  13.    <li><a href="http://www.example.com/en/" rel="http://preview.smp.com/en/">English</a></li>
  14.    <li><a href="http://www.example.com/fr/" rel="http://preview.smp.com/fr/">French</a></li>
  15.    <li><a href="http://www.example.com/es/" rel="http://preview.smp.com/es/">Spanish</a></li>
  16.  </ul>
  17. </div>
  18. </div>

jQuery:

  1. <script type="text/javascript">
  2.     $(document).ready(function () {
  3.         $(".language .sbHolder").click(function () {
  4.             $(".language .sbHolder ul.sbOptions li:first").hide();
  5.         });
  6.     });
  7. </script>

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 -