Advanced Search

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.

Expand | Embed | Plain Text

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.