Question

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

<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

Answer 1

你不应该这样做。你的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

Answer 2

Baz是对的。这不是最优的，但也许你没有选择？

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

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

2 个答案: