Skip to content

Instantly share code, notes, and snippets.

@Korko

Korko/nested_optgroup.html

Created October 9, 2012 12:58
Show Gist options
  • Save Korko/3858658 to your computer and use it in GitHub Desktop.
Save Korko/3858658 to your computer and use it in GitHub Desktop.
Download ZIP
Try to make nested optgroups
Raw
nested_optgroup.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul[data-widget=select]').each(function() {
var $select = $('<select>');
$(this).find('li').each(function() {
var text = $(this).clone().children().remove().end().text().trim();
for (var i = 1; i < $(this).parents('ul').length; i++) {
text = "&nbsp;&nbsp;" + text;
}
if ($(this).is(':has(ul)')) {
$select.append('<option disabled="disabled">' + text + '</option>');
} else {
$select.append('<option>' + text + '</option>');
}
});
$(this).after($select).remove();
});
});
</script>
</head>
<body>
<ul data-widget="select">
<li>A
<ul>
<li>AA
<ul>
<li>AAA</li>
<li>AAB</li>
</ul>
</li>
<li>AB
<ul>
<li>ABA</li>
</ul>
</li>
<li>AC
<ul>
<li>ACA
<ul>
<li>ACAA</li>
<li>ACAB</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment