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

时间:2012-03-14 11:30:42

标签: jquery

下拉菜单(右侧,城市名称如“gudauri”),dev.holiday.ge / xhtml / main.html必须如下所示:enter image description here

我尝试使用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>

您怎么看?

这会起作用吗?

2 个答案:

答案 0 :(得分:0)

是的,确实有效。我刚刚测试了你在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列的代码。

答案 1 :(得分:0)

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