将一个UL变成一个样式化的SELECT [英] Turning a UL into a styled SELECT

问题描述

首先，我对jQuery和HTMl5 / CSS3相当陌生，所以虽然可能有一个简单的解决方案，但我一直无法在互联网上找到一个。

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

我希望选择框的样式适合我的表单的其余部分，并且我希望在选择中显示类颜色。我假设我必须作弊和使用某种形式的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>秋季< / 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技能未能找到的教程。谢谢：）

解决方案

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

HTML

 < h3 id =charNameListHeader>选择您的卡通：< span id = selectedToon>< /跨度>< / H3> 
< ul id =charNameListstyle =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>秋季< / 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 =hiddenid =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/

从那里开始，你只需要让它看起来像你想要的那样看。 toonID被设置为一个隐藏的输入，所以你可以在处理输入时稍后拿起它。

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

解决方案

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.

这篇关于将一个UL变成一个样式化的SELECT的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！