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

<h3 id="charNameListHeader">Select Your Toon: <span id="selectedToon"></span></h3>
<ul id="charNameList" style="display:none;">
    <li data-toonID="1"><span class="priest">Alastriia</li>
    <li data-toonID="2"><span class="paladin">Aleathà</li>
    <li data-toonID="3"><span class="warrior">Arghra</li>
    <li data-toonID="4"><span class="druid">Autumnal</li>
    <li data-toonID="5"><span class="rogue">Beerisbadmmk</li>
    <li data-toonID="6"><span class="priest">Biip</li>
    <li data-toonID="7"><span class="mage">Blazeglory</li>
    <li data-toonID="8"><span class="druid">Blaçk</li>
    <li data-toonID="9"><span class="warlock">Braylna</li>
    <li data-toonID="10"><span class="warlock">Brileah</li>
</ul>
<input type="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()