Skip to content

Instantly share code, notes, and snippets.

@Awea

Awea/demo.html

Created February 10, 2012 09:40
Show Gist options
  • Save Awea/1788065 to your computer and use it in GitHub Desktop.
Save Awea/1788065 to your computer and use it in GitHub Desktop.
Download ZIP
Make html select referenceable
Raw
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Ref 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" language="javascript" src="selectref.js"></script>
</head>
<body>
<div style="width:457px;background-color:orange;margin:auto;padding:auto;height:50px;padding:7px;text-align:center;">
<ul id="tagglefriends" class="ref">
<li><a href="http://www.altiref.com">Altiref</a></li>
<li><a href="http://www.seoblackout.com/">Black Hat SEO</a></li>
<li><a href="http://oseox.fr/blog/">Blog marketing</a></li>
<li><a href="http://yeca.media-box.net/">Blog Référencement de Yeca</a></li>
<li><a href="http://blog.sitxpress.com/">Blog webmarketing</a></li>
<li><a href="http://www.grocodile.com">Mots d&#039;enfant</a></li>
<li><a href="http://www.twiger.fr">Twiger</a></li>
</ul>
</div>
<br /><br /><br /><br />
</body>
</html>
Raw
selectref.js
$(document).ready(function() {
$('ul.ref').each(function() {
var list = $('<select>');
list.attr('id', $(this).attr('id'));
list.attr({
'id': $(this).attr('id'),
'class': $(this).attr('class')
});
$(this).children().each(function() {
$('<option>').text($(this).text()).val($(this).find('a').attr('href')).appendTo(list);
});
$(this).replaceWith( list);
});
$('select').change(function(){
window.location = $(this).val();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment