Databases
StackOverflow2013
Postsdbo
POHow to sort <option> generated dynamically in <select>
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to sort <option> generated dynamically in <select>
    text
    copied!<p>I have 4 fields that are generated based on the input of the previous one, like in a tree list. Example:</p> <pre><code>&lt;select id="confederation"&gt; &lt;option value=""&gt;Confederation&lt;/option&gt; &lt;option value="29521"&gt;Europe (UEFA)&lt;/option&gt; &lt;option value="38731"&gt;South America (CONMEBOL)&lt;/option&gt; &lt;option value="40934"&gt;Africa (CAF)&lt;/option&gt; &lt;option value="43099"&gt;North &amp;amp; Central America (CONCACAF)&lt;/option&gt; &lt;option value="44624"&gt;Asia (AFC)&lt;/option&gt; &lt;option value="46617"&gt;Oceania (OFC)&lt;/option&gt; &lt;/select&gt; &lt;select id="country"&gt; &lt;option value=""&gt;Country&lt;/option&gt; &lt;/select&gt; &lt;select id="team"&gt; &lt;option value=""&gt;Team&lt;/option&gt; &lt;/select&gt; &lt;select id="competition"&gt; &lt;option value=""&gt;Competition&lt;/option&gt; &lt;/select&gt; </code></pre> <p>As you can see, only the first list is populated initially. Once you select the "<code>confederation</code>", the "<code>country</code>" gets populated accordingly, then after choosing a "<code>country</code>", the "<code>team</code>" gets populated and so on.</p> <p>What I would like to achieve is to sort this lists alphabetically (they are multi language supported so I cannot 'hard-code' a certain order)</p> <p>So I have the following script to properly sort the first list:</p> <pre><code>$("#confederation").append($("#confederation option:gt(0)").sort(function (a, b) { return a.text == b.text ? 0 : a.text &lt; b.text ? -1 : 1; })); </code></pre> <p>How to modify it in order to accommodate all the lists and sort them properly?</p> <p>Thanks a million, Arky</p> <p>EDIT: Here it's how the lists are populated using smarty:</p> <pre><code>{section name=foo start=0 loop=$tree_depth} {assign var="index" value=$smarty.section.foo.index} &lt;select id="{$id}"&gt; &lt;option value=""&gt;[[{$levels_captions.$index}:raw]]&lt;/option&gt; {*{defining parent of the curent selectbox}*} {if $index == 0} {assign var='parent' value=0} {else} {assign var='parentIndex' value=$index-1} {assign var='parent' value=$value.$parentIndex} {/if} {*{generating tree items based on parent}*} {foreach from=$tree_values.$parent item=tree_value} &lt;option value="{$tree_value.sid|escape}"{if $value.$index == $tree_value.sid} selected="selected"{/if}&gt;[[PhrasesInTemplates!{$tree_value.caption}]]&lt;/option&gt; {/foreach} &lt;/select&gt; </code></pre> <p>EDIT 2: I disagree that this question should be marked as duplicated. The solution proposed in the other thread applies in part to this question but it cannot be implemented to this one. Or I'm missing something obvious, hence the question!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload