При выполнении onchange заависает страница
 

Доброго времени суток.
В общем ситуация следующая:
Есть сайт.
На сайте установлен плагин jquery selecter
На одном из селектов висит onchange с функцией прописан прям в теге
Код самой функции:

function getprk(prdctid)
{ 
	var quantity = document.getElementById(prdctid+'quantity').value;
    var variation_id = document.getElementById(prdctid+'variation_id').value;
document.getElementById('kenars_cart_val').value=prdctid;
$.get('//xn--80aaokptod6b.xn--p1ai/ame.php?page=get_price&prod_id='+prdctid+'&variation_id='+variation_id+'&quantity='+quantity, function(data) {
var extv=data
var rezv = document.getElementById(prdctid+'price').innerHTML;
var arr=explode('amount">',rezv);
var otr = arr[1];
otr=explode('&nbsp;<span',otr);
var cena = parseInt(otr[0]);
    rezv = str_replace('amount">'+cena+'&nbsp;', 'amount">'+extv+'&nbsp;', rezv);
	document.getElementById(prdctid+'price').innerHTML=rezv;
});
}

str_replace и explode взяты с сайта javascript.ru раздел аналоги функций php
Так вот при изменении селекта функция то выполняется как надо но потом страница зависает и браузер выдает ошибку "эта страница работает очень медленно"
При этом если jquery selecter убрать то все нормально. А с ним зависает.
Подскажите пожалуйста в чем может быть причина и как лечить?

В обработке ответа сервера надо полагать.

Нет, с ответом сервера все ровно. Я же говорю если jquery selecter отключить то onchange нормально отрабатывает без зависаний. Какая то проблема именно в отработке события у измененного селекта. И я не могу понять в чем причина. Дебаггер молчит. Может есть какие то тонкости ыв использовании это jquery selecter'а?

Ответ это одно, а вот какой он, как его обрабатывают и что при этом творят на странице, это совсем другое.

А что у вас в этой функции помимо запроса сервера и бог знает что за разборки над ответом? Заремируйте тело функции, что также тупить будет? Что смеяться то.

Вот к чему на сервере плодить данные, которые приходится вот так ковырять - explode('amount">',rezv);, explode('&nbsp;<span',otr);, str_replace('amount">'+cena+'&nbsp;', 'amount">'+extv+'&nbsp;', rezv);?

И нафига нужен аналог explode, если это спокойно сделает split()? И аналог str_replace? И вообще зачем весь этот бедлам, что более удобной структуры/типа данных для обмена не существует?

А зачем его менять??? jquery selecter скрывает нативный select и очень плохо имитирует нативный, вставляя кучу элементов, что ухудшает производительность, ухудшает удобство использования, (не работает с клавиатуры, не удобно на ноутбуке при помощи тач-пада, и оно не работает почему-то в браузере Chrome 65 на Android)

Тот факт, что все селекты, чекбоксы и радиокнопки, не только в браузере, но и во всей ОС выполнены в одном стиле, помогает пользователям лучше понимать функциональность разных элементов, появляющихся на сайте.

Нативный select предлагает удобство использования. Например, select для iOS представляет собой “барабан”, а для Android — попап с пунктами для выбора.

Стандартный select позволяет использовать не два щелчка мышью (открыть, выбрать), а только один (открыть, потянуть, отпустить), прокрутку длинного списка не скроллом, а таким же образом — понянуть, проскроллить, отпустить. Единицы среди сотни реализаций кастомных селектов полностью повторяют механику нативных, а это очень сильно сказывается на удобстве использования т.к. большинство взаимодействий с интерфейсом у пользователя завязано на рефлексах.

Производители браузеров тратят бесчисленные часы на создание нативной поддержки для многих вещей, что улучшает как удобство использования, так и жизнь разработчика. Используйте эти нативные функции.

Не использовать jquery selecter, а использовать нативный select...

Один из тех самых компонентов с вашего сайта, стилизованный при помощи CSS. (и оно работает даже в браузере Chrome 65 на Android)

<label class="custom-select" data-label="Фасовка">
	<select>
		<option>0.1 кг</option>
		<option>0.5 кг</option>
		<option>1 кг</option>
	</select>
</label>

<style>
	
.custom-select {
	position: relative;
	display: inline-block;
	margin-top: 24px;
}

.custom-select:before{
	content: attr(data-label);
	font-weight: 700;
	text-align: center;
	right: 0; left: 0;
	position: absolute;
	top: -24px;
}

.custom-select select {
	background: #fff;
	color: #222;
	border: 1px solid #ccc;
	cursor: pointer;
	margin: 0;
	padding: 10px 15px;
	padding-right: 36px;
	border-radius: 3px;
	-moz-appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: 13px;
}

.custom-select select:focus {
	outline: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

.custom-select:after {
	position: absolute;
	top: 0; bottom: 0; right: 15px;
	width: 13px; height: 6px;
	margin: auto 0;
	background: url(https://xn--80aaokptod6b.xn--p1ai/wp-content/themes/FreeShopWooCommerceTheme/images/no-translate-detected_318-11165.jpg) no-repeat;
	background-size: 11px;
	pointer-events: none;
	content: "";
}

/* дальше только для этого примера */
body { font-family: 'Roboto Condensed', sans-serif; }
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">