Question

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 that uses an API call to pull the names of my WoW guild members into a UL with a class to properly color the names for the in game class they are. Now, I want to take that UL and turn it into a select box so the user can pick their character when they register for the site (more security to ensure the player is picking one of their toons is planed for the future).

I want the style of the select box to fit in with the rest of my form, and I want the class colors to show up in the select. I’m assuming I have to cheat and use some form of DIV, but haven’t been able to find a script that does exactly what I’m looking for. The format of my UL is like this:

    <ul id="charNameList">
        <li><span class="priest">Alastriia</li>
        <li><span class="paladin">Aleathà</li>
        <li><span class="warrior">Arghra</li>
        <li><span class="druid">Autumnal</li>
        <li><span class="rogue">Beerisbadmmk</li>
        <li><span class="priest">Biip</li>
        <li><span class="mage">Blazeglory</li>
        <li><span class="druid">Blaçk</li>
        <li><span class="warlock">Braylna</li>
        <li><span class="warlock">Brileah</li>
        ...
    </ul>

Any help is much appreciated, even just pointing me towards a tutorial that my Google skills have failed to find. Thank you 🙂

Answer 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.