Posted By

ReeceMarsland on 01/06/10


Tagged

jquery


Versions (?)

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


 / Published in: jQuery
 

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.

  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  

You need to login to post a comment.