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

这里的下拉菜单（右一个，城市名称如“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>

山
Gudauri
Bakuriani
斯瓦内蒂
海边
巴统
Kobuleti
Kvariati
资本金
第比利斯

改为：

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

山
Gudauri
Bakuriani
斯瓦内蒂


海边
巴统
Kobuleti
Kvariati


资本金
第比利斯

你觉得怎么样

---

这行得通吗？

是的，行得通。我刚刚在Firebug中测试了您上面提到的目标UL html，它成功了。我在css类chzn results{width:30%；float:left}中添加了以下属性。您需要帮助将单个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();

$（'#control_1_chzn.chzn drop li.group result'）。每个(
函数（索引，val）{
id='searchdropdown'+（1+索引）；
$（“#control_1_chzn.chzn drop”）.append（“
）；
$（this）.nextUntil（'li.group result'）.appendTo（$（'#'+id））；
$（this.prependTo（$（'#'+id））；
}
);
$（“#控制_1_chzn.chzn drop ul:first”）.remove（）；

---

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

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

是的，这将是非常棒的，因为我对jquery:p css部分的知识有限，我可以像Guru:D:D:Drely一样处理它工作吗？我试过用firebug，但没能成功。。。我的意思是项目不再可点击。我之前没有检查可点击性。让我检查一下，然后尝试创建jquery来转换我认为，不能点击是因为我们在注册点击事件后更改了dom元素。嗯，那么有没有办法解决这个问题？这不是问题，float:left，高度固定，可以正常工作。