jQuery convert ul li a into an option list with a img anchor button


/ Published in: jQuery
Save to your folder(s)

bit shabby and should really never do this but hey!
Takes an id selector of a ul and expects the ul to be ul>li>a which gets converted into an option list which changes the destination url of the anchor button beneath on select change. bah.


Copy this code and paste it in your HTML
  1. function generate_option_list(selector, list_id) {
  2. //set up variables for $output
  3. var href = '';
  4. var label = '';
  5. var selected = '';
  6. var src = '';
  7. var output = '<select id="' + list_id + '" class="form-select join-us-option-list" name="join-us-option-list">';
  8. var ending = '</select><br /><a class="join-us-next-button" href=""><img src="/sites/all/themes/main/images/button_join.png" alt="Join" /></a>';
  9.  
  10. $(selector).each(
  11. function( intIndex ){
  12. if(intIndex == 0) {
  13. selected = 'selected="selected"';
  14. src = $(this).attr('href');
  15. } else {
  16. selected = '';
  17. }
  18. href = $(this).attr('href');
  19. label = $(this).text();
  20. output += '<option ' + selected + 'value="' + href + '">' + label + '</option>';
  21. }
  22. );
  23.  
  24. output += ending;
  25. $(selector).parent().parent().parent().append(output);
  26. $(selector).parent().parent().parent().find('.join-us-next-button').attr('href', src)
  27. $(selector).parent().parent().remove();
  28. }
  29.  
  30. //Convert the lists on the join page into select lists and only run if on correct page.
  31. if($('#join-us-regular-list').length) {
  32.  
  33. //Call function to convert the lists
  34. generate_option_list("#join-us-regular-list li a", "join-us-regular-list");
  35. generate_option_list("#join-us-key-list li a", "join-us-key-list");
  36. generate_option_list("#join-us-joint-list li a", "join-us-joint-list");
  37. var src = '';
  38. }
  39.  
  40. //Attach onchange events to update the Next button urls
  41. $('#join-us-regular-list,').change( function() {
  42. $('#join-us-regular-list option:selected').each(function () { src = $(this).val(); });
  43. $(this).parent().find('.join-us-next-button').attr('href', src);
  44. });
  45. $('#join-us-key-list,').change( function() {
  46. $('#join-us-key-list option:selected').each(function () { src = $(this).val(); });
  47. $(this).parent().find('.join-us-next-button').attr('href', src);
  48. })
  49. $('#join-us-joint-list,').change( function() {
  50. $('#join-us-joint-list option:selected').each(function () { src = $(this).val(); });
  51. $(this).parent().find('.join-us-next-button').attr('href', src);
  52. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.