Question

首先，我是jQuery和HTMl5 / CSS3的新手，所以尽管可能有一个简单的解决方案，但我一直无法在互联网上找到它。

我有一个PHP脚本，它使用API调用将我的WoW公会成员的名字拉到一个带有类的UL中，以正确地为它们所在的游戏类着色。现在，我想把UL转换成一个选择框，这样用户可以在注册网站时选择他们的角色（更安全，以确保玩家选择他们的一个toons计划在未来）。

我希望选择框的样式与表单的其余部分一致，我希望类颜色显示在选择中。我假设我必须作弊并使用某种形式的DIV，但却找不到一个完全符合我要求的脚本。我的UL格式如下：

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

非常感谢任何帮助，甚至只是指向我的Google技能未能找到的教程。谢谢:)）

Answer 1

我相信你正在寻找更像这样的东西：

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小提琴：http://jsfiddle.net/TQNfQ/2/

从那里，你只是让它看起来像你想要它看起来。 toonID被设置为隐藏输入，因此您可以在以后处理输入时进行拾取。

Answer 2

为什么不使用select元素？我认为最简单的方法之一就是隐藏除活跃的元素之外的所有<li>元素。这看起来像这样：

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

将UL转换为样式化的SELECT

2 个答案: