将下拉列表框转换为 UL LI？答案

【问题标题】：convert drop down list box to UL LI?将下拉列表框转换为 UL LI？
【发布时间】：2012-05-17 23:47:14
【问题描述】：

我这里有一个下拉列表框：

<select class="CountrySelectList" name="CountrySelectList" id="CountrySelectList" onchange="self.location='setlocale.aspx?returnURL=Default.aspx&amp;localesetting=' + document.getElementById('CountrySelectList').value" size="1">
    <option value="de-DE">Deutsch</option>
    <option selected="" value="en-US">English</option>
    <option value="fr-FR">Francais</option>
    <option value="it-IT">Italiano</option>
    <option value="es-ES">Español</option>
    <option value="pt-PT">Português</option>
    <option value="cs-CZ">Czech Republic</option>
    <option value="pl-PL">Polska</option>
    <option value="hu-HU">Hungary</option>
</select>

将其转换为项目符号列表的最佳方法是什么，以便我可以像这样将它们显示在一行中：（我的示例没有反映 dd- 但你明白了）

我想使用 jquery 还是 javascript？

UK | DE | CZ

【问题讨论】：

您是否有任何理由不在源代码中执行此操作，而不是在每个页面加载时动态执行此操作？

标签： javascript jquery css drop-down-menu

【解决方案1】：

巴兹是正确的。这不是最佳选择，但也许您别无选择？

var countryArr = [];
var $ul = $('<ul />');
countryArr = $('#CountrySelectList option').map(function() {
    return this.value
}).get();
$.each(countryArr, function() {
    $ul.append('<li>' + this.slice(3));
});
$('body').append($ul);

Fiddle

【讨论】：

您已经为我提供了答案。但是每个人都说我应该对标记进行硬编码。
@sp-1986 虽然技术上可行，但不建议您仅更改标记。
同意，绝对硬编码标记并避免性能损失。
我稍微修改了您的脚本并将其包含在您的答案中。它会帮助其他人。

【解决方案2】：

您不应该这样做。您的 Javascript 会在每次页面加载时运行，从而不必要地浪费资源。

编写新标记不需要太多时间，链接列表您可以轻松地使用 CSS 设置样式，使其看起来符合您的需要。当您需要页面中的链接列表时，为什么要在标记中包含表单元素？

<ul id="CountrySelectList" class="CountrySelectList">
    <li>
         <a href="setlocale.aspx?returnURL=Default.aspx&amp;localesetting=de-DE">DE</a>
    </li>
    <li>
         <a class="selected" href="setlocale.aspx?returnURL=Default.aspx&amp;localesetting=en-US">US</a>
    </li>
    ...
</ul>

Here is a simple jsFiddle Demo

【讨论】：

你说得对，我可以在皮肤或主题页面中硬编码。