Posted By

ReeceMarsland on 01/06/10

Tagged

jquery

Versions (?)

Last Edited at 01/06/10 09:29am

Statistics

Viewed 1049 times

Favorited by 0 user(s)

Related snippets

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.

Highlighted TextExpand

function generate_option_list(selector, list_id) {
		//set up variables for $output
		var href = '';
		var label = '';
		var selected = '';
		var src = '';
		var output = '<select id="' + list_id + '" class="form-select join-us-option-list" name="join-us-option-list">';
		var ending = '</select><br /><a class="join-us-next-button" href=""><img src="/sites/all/themes/main/images/button_join.png" alt="Join" /></a>';
		
		$(selector).each(
			function( intIndex ){
				if(intIndex == 0) {
					selected = 'selected="selected"';
					src = $(this).attr('href');
				} else {
					selected = '';
				}
				href = $(this).attr('href');
				label = $(this).text();
				output += '<option ' + selected + 'value="' + href + '">' + label + '</option>';
			}
		);
		
		output += ending;
		$(selector).parent().parent().parent().append(output);
		$(selector).parent().parent().parent().find('.join-us-next-button').attr('href', src)
		$(selector).parent().parent().remove();
	}
	
	//Convert the lists on the join page into select lists and only run if on correct page.
	if($('#join-us-regular-list').length) {
		
		//Call function to convert the lists
		generate_option_list("#join-us-regular-list li a", "join-us-regular-list");
		generate_option_list("#join-us-key-list li a", "join-us-key-list");
		generate_option_list("#join-us-joint-list li a", "join-us-joint-list");
		var src = '';
	}
	
	//Attach onchange events to update the Next button urls
	$('#join-us-regular-list,').change( function() {     
		$('#join-us-regular-list option:selected').each(function () { src = $(this).val(); });
		$(this).parent().find('.join-us-next-button').attr('href', src);
	});		
	$('#join-us-key-list,').change( function() {     
		$('#join-us-key-list option:selected').each(function () { src = $(this).val(); });
		$(this).parent().find('.join-us-next-button').attr('href', src);
	})
	$('#join-us-joint-list,').change( function() {     
		$('#join-us-joint-list option:selected').each(function () { src = $(this).val(); });
		$(this).parent().find('.join-us-next-button').attr('href', src);
	});

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.