Что надо сделать чтобы функция работала на каждый select отдельно?

Question

[Олег Морев]

Добрый день, граждане)
Написал не большой код для стилизации select, но если на странице два select и больше получается очень плохая вещь, можно как-то малой кровью это поправить?)

Так же хотелось бы услышать коментарии по сворачиванию select по клику на body (самый нижний кусок кода), как можно еще реализовать это, и вообще что можно было бы улучшить или уменьшить в коде)

Если можно и возможно все правки на JQ) заранее спасибо:)

jsfiddle.net/ubrgzxke/4

Answer 1

[Виталий Инчин ☢]

Ну как-то так.

Что надо сделать

Прочитать про ключевое слово this и научиться с ним работать.

В вашем коде при каком-либо действии затрагиваются все элементы сразу, к примеру, вы пишите:

option.each(function(i, item){
   list.append('<li>' + $(item).text() + '</li>');
});

И этот код добавит всем элементам .list все элементы option, какие только есть на странице. А на самом деле, у каждого .select свой лист и опции и работать с ними нужно отдельно.

Еще интересные строки:

//Установит всем .selected на странице значение первого select'a
selected.text(select.val());

//Если первый .selected на странице имеет класс focus, скрыть все существующие списки 
container.click(function(){
		if(selected.hasClass('focus')){
			list.slideUp(300, function(){
				selected.removeClass('focus');
			});
			return;
		};

		list.slideDown(300);
		selected.addClass('focus');
	});

UPD: А скрывать списки по нажатию куда-то вне них можно так

$(document).click(function(e) {
        $(e.target).closest(".select").length||
              $(".focus").removeClass("focus")
                    .next(".list").slideUp(300);
});

Comments

[Олег Морев]

Да спасибо, понял в чём главный косяк был)

Answer 2

[Слава]

для начала так
jsfiddle.net/ubrgzxke/5

Comments

[Олег Морев]

А закрытие select при клике на body нормально? не надо больше ничего мудрить?)

[Слава]

смотря что Вы делаете. Если большое приложение - конечно надо. Если маленький модуль для себя - можно и оставить.