Affecting dropdown menu with button click

Affecting dropdown menu with button click

Hi,

I have the following code which causes the buttonclick "next" to affect the dropdown menu "page_num" and effectively loops to the next option in the dropdown on each button click. I can get it to work using the jquery ui $("#next").button(); however getting the jquery ui dropdown menu to work is proving more difficult. Can anyone offer some assistance in how to integrate the ("#page_num").selectmenu(); into this script please? I've tried various different arrangements and have had no luck so far.

  1. $(document).ready(function() {
  2.     $("#next").button();
  3.     $('#next').click(function() {  
  4.         $('#page_num :selected').each(function() {           
  5.             var curElement = $(this).text();
  6.             var nextElement = $(this).next();
  7.             var nextElementText = $.trim(nextElement.text());
  8.             if(nextElementText!=''){
  9.             $(curElement).removeAttr('selected');
  10.             $(nextElement).attr('selected',true);
  11.             }else{
  12.                 $(this).removeAttr('selected');
  13.                 $('#page_num:first-child').attr("selected", "selected");
  14.             }
  15.         });    
  16.     });      
  17. });


  1. <label>Page
  2.       <select size="1" name="page_num" id="page_num">
  3.             <option value="1" selected="selected">1</option>
  4.             <option value="2">2</option>
  5.             <option value="3">3</option>
  6.             <option value="4">4</option>
  7.       </select>
  8. </label>
  9. <button type="button" id="next">Next</button>

  10. <script type="text/javascript" src="../jquery.js"></script>
  11. <script type="text/javascript" src="../jquery-ui-1.11.1.custom/jquery-ui.js"></script>


Many thanks!