- Back to Home »
- HTML , jQuery »
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:
- <div class="language">
- <select id="language" name="language" sb="76231018" style="display: none;">
- <option value="0">Select Language</option>
- <option value="http://www.example.com/en/" page="master">English</option>
- <option value="http://www.example.com/fr/" page="master">French</option>
- <option value="http://www.example.com/es/" page="master">Spanish</option>
- </select>
- <div id="sbHolder_76231018" class="sbHolder" tabindex="0">
- <a id="sbToggle_76231018" href="#" class="sbToggle"></a>
- <a id="sbSelector_76231018" href="#" class="sbSelector">Select Language</a>
- <ul id="sbOptions_76231018" class="sbOptions" style="display: none;">
- <li><a href="#0" rel="0" class="sbFocus">Select Language</a></li>
- <li><a href="http://www.example.com/en/" rel="http://preview.smp.com/en/">English</a></li>
- <li><a href="http://www.example.com/fr/" rel="http://preview.smp.com/fr/">French</a></li>
- <li><a href="http://www.example.com/es/" rel="http://preview.smp.com/es/">Spanish</a></li>
- </ul>
- </div>
- </div>
jQuery:
- <script type="text/javascript">
- $(document).ready(function () {
- $(".language .sbHolder").click(function () {
- $(".language .sbHolder ul.sbOptions li:first").hide();
- });
- });
- </script>