Как отсортировать по алфавиту?

Question

[m4f1]

Помогите поймать названия цветов и отсортировать их по алфавиту.

Сам список цветов находится в dropbox, подгружается все запросами из бд (система сайта webasyst), сейчас формируется список по id элементов. Цвета вместе с ссылкой подставляются в (нет, функцию переписать возможности нет, нужно именно javascript/jquery)


Кусок кода html страницы:

<select id="sort_sel" name="tsvet1[]">																				    
<option data-urll="" value="">Не выбрано</option>
<option data-urll="?tsvet1%5B0%5D=27" value="27">чёрный</option>
<option data-urll="?tsvet1%5B0%5D=34" value="34">синий</option>
<option data-urll="?tsvet1%5B0%5D=44" value="44">переливающийся</option>
<option data-urll="?tsvet1%5B0%5D=54" value="54">голубой</option>
<option data-urll="?tsvet1%5B0%5D=48" value="48">бирюзовый</option>
<option data-urll="?tsvet1%5B0%5D=35" value="35">зелёный</option>
<option data-urll="?tsvet1%5B0%5D=53" value="53">камуфляж</option>
<option data-urll="?tsvet1%5B0%5D=29" value="29">серый</option>
<option data-urll="?tsvet1%5B0%5D=39" value="39">фиолетовый</option>
<option data-urll="?tsvet1%5B0%5D=50" value="50">с рисунком</option>
<option data-urll="?tsvet1%5B0%5D=46" value="46">коричневый</option>
<option data-urll="?tsvet1%5B0%5D=31" value="31">серебро</option>
<option data-urll="?tsvet1%5B0%5D=55" value="55">пурпурный</option>
<option data-urll="?tsvet1%5B0%5D=52" value="52">металлик</option>
<option data-urll="?tsvet1%5B0%5D=51" value="51">бежевый</option>
<option data-urll="?tsvet1%5B0%5D=32" value="32">розовое золото</option>
<option data-urll="?tsvet1%5B0%5D=33" value="33">красный</option>
<option data-urll="?tsvet1%5B0%5D=45" value="45">оранжевый</option>
<option data-urll="?tsvet1%5B0%5D=41" value="41">разноцветный</option>
<option data-urll="?tsvet1%5B0%5D=49" value="49">розовый</option>
<option data-urll="?tsvet1%5B0%5D=30" value="30">золото</option>
<option data-urll="?tsvet1%5B0%5D=36" value="36">жёлтый</option>
<option data-urll="?tsvet1%5B0%5D=28" value="28">белый</option>
<option data-urll="?tsvet1%5B0%5D=37" value="37">прозрачный</option>
</select>

Кусок внутреннего кода:

{foreach $filters as $fid => $filter}

	{if $fid == 'price'}{continue}{/if}
	<div class="flex_block for-market-sort" data-piwik-category="category" data-piwik-name="filters_{$filter.code}">
		<label for="sort_sel">{$filter.name|escape}:</label>
		{if !empty($ids[$fid])}
			{$filterUnavailable = !array_intersect_key(array_flip($ids[$fid]), $filter.values)}
		{else}
			{$filterUnavailable = 1}
		{/if}

		<select id="sort_sel" name='{$filter.code}[]' class="filter_select">

			{if 1}

{$i = 0}

{foreach $filter.values as $v_id => $v}
	{if $v == 'Не выбрано'}
		<option data-urll="{shopMypluginPlugin::href_query_string2($filter.code, false)}" value="">Не выбрано</option>
	{else}    
		{if $i == 0 }
			<option data-urll="{shopMypluginPlugin::href_query_string2($filter.code, false)}" value="">Не выбрано</option>
			{$i = 1}
		{/if}

		{if 1 OR in_array($v_id, $availibleIDs[$fid])}

			<option data-urll="{shopMypluginPlugin::href_query_string2($filter.code, $v_id)}"
			
			{if !empty($codes[$v_id])} 
				data-url='{$codes[$v_id]}'
			{/if}
			
			{if !empty($active_url[{$filter.code}])}

				{if in_array($v_id, $active_url[{$filter.code}])} 
				selected
				{/if}
			{/if} value="{$v_id}">
			
			{if is_array($v)}
			{shopMypluginPlugin::my_trim(shopMypluginPlugin::my_mb_ucfirst(strip_tags($v.value)))|escape}
			
			{else}
				{shopMypluginPlugin::my_trim(shopMypluginPlugin::my_mb_ucfirst(strip_tags($v)))|escape}
			{/if}
			
			</option>
		{/if}
	{/if}
{/foreach}
				{if 0}</optgroup>{/if}
			{/if}
		</select>
	</div>
{/foreach}

Таким образом не выходит, пишет result not found (нужно выделить конкретные элементы, как я понял):

$(document).ready(function() {
	$("#sort_sel").html($('#sort_sel option').sort(function(x, y) {
		return $(x).text() < $(y).text() ? -1 : 1;
	}))
	//$("#sort_sel").get(0).selectedIndex = 0;
	//e.preventDefault();
});

Answer 1

[Денис]

const select = $('#sort_sel');
select.find('option:not(:first-child)').sort(function(a, b) {
  var sa = a.textContent.toLowerCase(),
    sb = b.textContent.toLowerCase();
  return sb < sa ? 1 : sb > sa ? -1 : 0;
}).appendTo(select);

https://jsfiddle.net/Deonis/t2Lw9agp/

P.S. Селектор, скорее всего, что лучше такой: select.find('option:not([value=""])')

Comments

[m4f1]

так не работает, каким образом можно сослаться только на блок со свойством name="tsvet1[]"?

[Денис]

m4f1, не понимаю, что именно не работает. Пример в песочнице - это не тот результат, который вы ожидали?

[m4f1]

Денис, в том то и проблема, что в песочнице работает, а у меня как было вразнобой так и есть, я предполагаю, что виновата функция выгрузки цветов из бд, есть вариант сделать сортировку после загрузки страницы полностью?

[lUser L]

m4f1, очисти кэш

[m4f1]

Эмиль Гасанов, всегда использую ctrl+f5

[Денис]

m4f1, не обязательно "всей". Достаточно дождаться загрузки DOM.

$(function(){
    // тут весь код сценария
});

[m4f1]

Денис, так и стоит, но не работает как не крути, пробовал все же сослаться на блок с именем, но аналогично первому варианту ничего не происходит

[Денис]

m4f1, а в консоли какие-то ошибки наблюдаются? И в той же консоли, попробуйте вывести элементы: и select, и option

[m4f1]

Денис, ошибок в консоли нет

[m4f1]

Денис, так, в общем, нашел кое что, не работает в песочнице, если целиком весь фильтр залить
https://jsfiddle.net/m4f1bru/t6chgf7r/

[Денис]

m4f1, хорошо, давайте самый простой тест. Запустите код прямо в консоли. Только без обёртки DOM-Ready

[m4f1]

Денис, запустил

[Денис]

m4f1, в общем, код в песочнице немного внес ясности. У вас несколько элементов с одинаковыми ID, чего в принципе быть не может.

[m4f1]

Денис, как оказалось быть это может, есть вариант сослаться именно на <select id="sort_sel" name="tsvet1[]"> ?

[Денис]

m4f1, не может и не я это придумал. ID - это уникальный идентификатор, что по сути говорит о том, что этот элемент единственный и неповторимый в пределах одного документа. Менять эту грубую ошибку или нет - дело ваше, а сортировку можете сделать следующим образом:

$('.filter_select').each(function(el) {
  $(el).find('option:not(:first-child)').sort(function(a, b) {
    var sa = a.textContent.toLowerCase(),
      sb = b.textContent.toLowerCase();
    return sb < sa ? 1 : sb > sa ? -1 : 0;
  }).appendTo(el);
});

[m4f1]

Денис, суть понятна, изменить, к сожалению, не выйдет, весь код писался разными людьми, могу только тут более менее отредактировать.
Сортировка не работает, выдает ошибку:

[m4f1]

Денис, в песочнице данный вариант так же не работает

[Денис]

m4f1, забыл что в callback-функции each первым аргументом передаётся индекс. Этот код работает уже 100%:

$('.filter_select').each(function(i, el) {
  $(el).find('option:not(:first-child)').sort(function(a, b) {
    var sa = a.textContent.toLowerCase(),
      sb = b.textContent.toLowerCase();
    return sb < sa ? 1 : sb > sa ? -1 : 0;
  }).appendTo(el);   
});

[m4f1]

Денис, огромное спасибо за помощь!