Turning A Ul Into A Styled Select

First of all, I'm fairly new to jQuery and HTMl5/CSS3, so while there is probably a simple solution to this, I have been unable to find one on the internet. I have a PHP script tha

Solution 1:

I believe you are looking for something more like this:

HTML

<h3id="charNameListHeader">Select Your Toon: <spanid="selectedToon"></span></h3><ulid="charNameList"style="display:none;"><lidata-toonID="1"><spanclass="priest">Alastriia</li><lidata-toonID="2"><spanclass="paladin">Aleathà</li><lidata-toonID="3"><spanclass="warrior">Arghra</li><lidata-toonID="4"><spanclass="druid">Autumnal</li><lidata-toonID="5"><spanclass="rogue">Beerisbadmmk</li><lidata-toonID="6"><spanclass="priest">Biip</li><lidata-toonID="7"><spanclass="mage">Blazeglory</li><lidata-toonID="8"><spanclass="druid">Blaçk</li><lidata-toonID="9"><spanclass="warlock">Braylna</li><lidata-toonID="10"><spanclass="warlock">Brileah</li></ul><inputtype="hidden"id="selectedToonInput" />

JS

$('#charNameListHeader').click( function() {
    $(this).next().toggle();
});
$('#charNameList li').click( function() {
    var selectedValue = $(this).attr('data-toonID');
    $('#selectedToonInput').val(selectedValue);
    var newToon = $(this).children('span').clone();
    $('#selectedToon').html(newToon);
    $('#charNameList').hide();
});

JS Fiddle: http://jsfiddle.net/TQNfQ/2/

From there, you just make it look like you want it to look. The toonID gets set to a hidden input so you can pick it up later when you process the input.

Solution 2:

Why not use a select element? One of the easiest ways to do this I think would be to hide all the <li> elements besides the one that is active. That would look something like this:

$('ul#charNameList li').hide().toggle(function(){
    $(this).siblings().hide();
}, function(){
    $(this).siblings().show();
}).first().show()