jquery下拉列表从select到ul li重写

Question

下拉菜单（右侧，城市名称如“gudauri”），dev.holiday.ge / xhtml / main.html必须如下所示：

我尝试使用CSS，但我认为这是不可能的......

我的想法是创建另一个小的jquery脚本，它将修改下拉列表的内容，进一步将其分为3个。

当前输出：

<ul class="chzn-results">
<li class="group-result" id="control_1_chzn_g_0" style="display: list-item;">Mountain</li>
<li style="" class="active-result result-selected group-option" id="control_1_chzn_o_1">Gudauri</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_2">Bakuriani</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_3">Svaneti</li>

<li class="group-result" id="control_1_chzn_g_4" style="display: list-item;">Seaside</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_5">Batumi</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_6">Kobuleti</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_7">Kvariati</li>

<li class="group-result" id="control_1_chzn_g_8" style="display: list-item;">Capital</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_9">Tbilisi</li>
</ul>

改为：

<ul class="chzn-results" id="searchdropdown1">
<li class="group-result" id="control_1_chzn_g_0" style="display: list-item;">Mountain</li>
<li style="" class="active-result result-selected group-option" id="control_1_chzn_o_1">Gudauri</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_2">Bakuriani</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_3">Svaneti</li>
</ul>

<ul class="chzn-results" id="searchdropdown2">
<li class="group-result" id="control_1_chzn_g_4" style="display: list-item;">Seaside</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_5">Batumi</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_6">Kobuleti</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_7">Kvariati</li>
</ul>

<ul class="chzn-results" id="searchdropdown3">
<li class="group-result" id="control_1_chzn_g_8" style="display: list-item;">Capital</li>
<li style="" class="active-result group-option" id="control_1_chzn_o_9">Tbilisi</li>
</ul>

您怎么看？

这会起作用吗？

Answer 1

是的，确实有效。我刚刚测试了你在Firebug中提到的目标UL html并且它有效。我在css类中添加了以下属性chzn-results {width：30％;向左飘浮}。您是否需要帮助将单个UL转换为3个UL？

$('#control_1_chzn .chzn-drop li.group-result').each(
function(index,val){
id='searchdropdown'+(1+index);
$('#control_1_chzn .chzn-drop').append('<ul class="chzn-results" style="width:30%; float:left;" id="'+id+'"></ul>');
$(this).nextUntil('li.group-result').appendTo($('#'+id));
$(this).prependTo($('#'+id));
}
);
$('#control_1_chzn .chzn-drop ul:first').remove();

更新：添加了将原始UL列表转换为3列的代码。

Answer 2

对于用css实现的水平分隔符，你必须在所有ul中有相同数量的li，或者分隔符可以是背景图形。