Home/ Questions/Q 7642219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T09:08:02+00:00

Dropdown menu (the right one, with city names like gudauri) here dev.holiday.ge/xhtml/main.html must look

  • 0

Dropdown menu (the right one, with city names like “gudauri”) here dev.holiday.ge/xhtml/main.html must look like this: enter image description here

I tried with CSS but I think it is quite impossible…

My idea was to create another little jquery script that will modify contents of dropdown further dividing it into 3 ‘s.

Current output:

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

Change into this:

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

What do you think?

Will this work at all?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes, It does work. I just tested the target UL html you mentioned above in Firebug and it worked. I added following attributes in the css class chzn-results{width:30%; float:left}. Do you need help in tansforming single UL into 3 UL’s ?

    $('#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();

    Update: Added code to tranform the original UL list into 3 columns.

    • 0