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.
- $(document).ready(function() {
- $("#next").button();
- $('#next').click(function() {
- $('#page_num :selected').each(function() {
- var curElement = $(this).text();
- var nextElement = $(this).next();
- var nextElementText = $.trim(nextElement.text());
- if(nextElementText!=''){
- $(curElement).removeAttr('selected');
- $(nextElement).attr('selected',true);
- }else{
- $(this).removeAttr('selected');
- $('#page_num:first-child').attr("selected", "selected");
- }
- });
- });
- });
- <label>Page
- <select size="1" name="page_num" id="page_num">
- <option value="1" selected="selected">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- </select>
- </label>
- <button type="button" id="next">Next</button>
-
- <script type="text/javascript" src="../jquery.js"></script>
- <script type="text/javascript" src="../jquery-ui-1.11.1.custom/jquery-ui.js"></script>
Many thanks!