Изменение стиля тэга Select после выбора элемента списка?

@DMax921 · Регистрация: 21.12.2015

Студворк — интернет-сервис помощи студентам

Всем привет, друзья, подскажите пожалуйста, хочу неким образом изменить выпадающий список, собственно как сделать так, что бы при выборе элемента из списка, бордер становился подсвеченным, мол "вы уже выбрали" и при нажатии на хрестик выбранный элемент становился не выбранным типа как на OLX....

Долго ищу, но даже блин не знаю как толком в поисковике искать(
Заранее спасибо

@AmateR62 · 29.12.2015, 08:55

Подключайте скрипты. Получится что то вроде такого:
http://codepen.io/anon/pen/GoNjdN

HTML5
1
2
3
4
5
6
7
8
<select id="spisok">
  <option>Выберите элемент</option>
  <option>Элемент 1</option>
  <option>Элемент 2</option>
  <option>Элемент 3</option>
  <option>Элемент 4</option>
</select>
<input type="button" id="reset" value="Сбросить"/>

CSS
1
2
3
#spisok {
  border: 2px solid black;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
  $('#spisok').change(function() {
    if ($("#spisok :selected").val()!="Выберите элемент") {
      $("#spisok").css("border-color", "red");
    }
  });
  
  $('#reset').click(function() {
    $("#spisok").val($("#spisok option:first").val());
    $("#spisok").css("border-color", "black");
  })
});

@DMax921 · 31.12.2015, 13:38 **[ТС]**

AmateR62, Спасибо огромное)) я даже не думал что кто-то поможет))
Это уже наверное наглость, подскажите, а как эту кнопочку "сбросить" изменить, например на хрестик и переместить в поле что бы она появлялась только тогда, когда есть выбранный элемент, а то у меня мозга не хватает что бы так сделать...
И еще раз спасибо!!!!))

@AmateR62 · 31.12.2015, 14:05

Не обязательно цеплять событие сброса на кнопку, можно сделать и при клике на картинке. http://codepen.io/anon/pen/ZQBdYb

HTML5
1
2
3
4
5
6
7
8
9
<select id="spisok">
  <option>Выберите элемент</option>
  <option>Элемент 1</option>
  <option>Элемент 2</option>
  <option>Элемент 3</option>
  <option>Элемент 4</option>
</select>
 
<a id="reset" href="javascript;"><img src="http://yt3.ggpht.com/-pkLvubnGvNI/AAAAAAAAAAI/AAAAAAAAAAA/xjKevn1itoM/s900-c-k-no/photo.jpg"></a>

CSS
1
2
3
4
5
6
7
#spisok {
  border: 2px solid black;
}
 
#reset img {
  width: 20px;
}

Картинку ставите какая вам нравится. Скрипт остается тот же.

@DMax921 · 31.12.2015, 18:13 **[ТС]**

AmateR62, Спасибо за помощь, и к стате, совсем забыл с этими полями) с наступающим новым годом!!! Всех благ!!!)))
А теперь по теме:
Я подумал, и понял, что присоединить кнопку к каждому полю будет не удобно, проще сделать одну кнопку сброса для всех полей с перезагрузкой страницы, но вот как это сделать в этой сортировке вообще не понимаю, шаблон вывода сортировки находится в JS а я в нем как в лесу))
AmateR62, может подскажите как это организовать?
Хочется сделать сброс фильтра с перезагрузкой страницы и название поля вместо "Выберите..." и тему можно закрывать...
Если не пройдете мимо то я выставлю скрипт, может будет время и поможете...
Имя поля это "+t_name_pole+"
Само поле "+t_html_pole+"
Вот сам скрипт на яндекс диске
Заранее огромное спасибо за помощь!
Всех с наступающим новым годом, держите марку и не придерживайтесь норм))))

@DMax921 · 10.01.2016, 22:36 **[ТС]**

Так ничего и не получилось, кнопки появляются, цвет меняется, select очищается но все это только на одном списке, все остальные не реагируют...

@AmateR62 · 11.01.2016, 09:21

Сообщение от DMax921

проще сделать одну кнопку сброса для всех полей с перезагрузкой страницы

Когда вы перезагрузите страницу, все селекты и так сбросятся на значение по умолчанию.

@DMax921 · 11.01.2016, 15:36 **[ТС]**

Да, после обновления страницы, все выбраные опции в списках обнулятся, но, если выбрал и нажал "поиск" то обновления страницы уже не поможет, нужно сбросить и типа снова нажать на поиск что бы вернутся на исходную... Но это все работает только на первом селекте...

@AmateR62 · 11.01.2016, 15:57

Тогда можно попробовать вот так переделать скрипт сброса:

JavaScript
1
2
3
4
5
6
$('#reset').click(function() {
    $("select").each(function() {
      $(this).val($("#"+$(this).attr("id")+" option:first").val());
    });    
    $("select").css("border-color", "black");
  })

http://codepen.io/anon/pen/WrOGav

@DMax921 · 12.01.2016, 23:21 **[ТС]**

Как бы то так, но вижу что тут id spisok1 и spisok2 но я не смогу так сделать...

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 case ("list"):
        {
         t+="<select "+t_change+" name='"
          +name_prefix_dynamic_pole_form+data_one_properties["id_properties"]+"' >";
         t+="<option value='-1'>выберите...</option>";
         for (j=0;j<mas_values_properties.length;j++)
           {
            one_values=mas_values_properties[j];
            t_selected="";
            if ( on_value_pole )
              {
               if (meaning_pole == one_values["id_value"])
                 {
                  t_selected=" selected='selected' ";
                 }
              }
            t+="<option value='"+one_values["id_value"]+"' "+t_selected+" >"+one_values["name_value"]+"</option>";
           }
         t+="</select>";
         //t+=t_block_dynamic;
         break;
        }

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .

@DMax921 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 30

	Изменение стиля тэга Select после выбора элемента списка? 28.12.2015, 22:32. Показов 3903. Ответов 9 Метки нет (Все метки) Всем привет, друзья, подскажите пожалуйста, хочу неким образом изменить выпадающий список, собственно как сделать так, что бы при выборе элемента из списка, бордер становился подсвеченным, мол "вы уже выбрали" и при нажатии на хрестик выбранный элемент становился не выбранным типа как на OLX.... Долго ищу, но даже блин не знаю как толком в поисковике искать( Заранее спасибо 0

@DMax921 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 30
	31.12.2015, 13:38 [ТС]
	AmateR62, Спасибо огромное)) я даже не думал что кто-то поможет)) Это уже наверное наглость, подскажите, а как эту кнопочку "сбросить" изменить, например на хрестик и переместить в поле что бы она появлялась только тогда, когда есть выбранный элемент, а то у меня мозга не хватает что бы так сделать... И еще раз спасибо!!!!)) 0

@DMax921 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 30
	31.12.2015, 18:13 [ТС]
	AmateR62, Спасибо за помощь, и к стате, совсем забыл с этими полями) с наступающим новым годом!!! Всех благ!!!))) А теперь по теме: Я подумал, и понял, что присоединить кнопку к каждому полю будет не удобно, проще сделать одну кнопку сброса для всех полей с перезагрузкой страницы, но вот как это сделать в этой сортировке вообще не понимаю, шаблон вывода сортировки находится в JS а я в нем как в лесу)) AmateR62, может подскажите как это организовать? Хочется сделать сброс фильтра с перезагрузкой страницы и название поля вместо "Выберите..." и тему можно закрывать... Если не пройдете мимо то я выставлю скрипт, может будет время и поможете... Имя поля это "+t_name_pole+" Само поле "+t_html_pole+" Вот сам скрипт на яндекс диске Заранее огромное спасибо за помощь! Всех с наступающим новым годом, держите марку и не придерживайтесь норм)))) 0

@DMax921 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 30
	10.01.2016, 22:36 [ТС]
	Так ничего и не получилось, кнопки появляются, цвет меняется, select очищается но все это только на одном списке, все остальные не реагируют... 0

@DMax921 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 30
	11.01.2016, 15:36 [ТС]
	Да, после обновления страницы, все выбраные опции в списках обнулятся, но, если выбрал и нажал "поиск" то обновления страницы уже не поможет, нужно сбросить и типа снова нажать на поиск что бы вернутся на исходную... Но это все работает только на первом селекте... 0

Изменение стиля тэга Select после выбора элемента списка?

Решение