Изменение стиля тэга 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;
        }

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

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

	Изменение стиля тэга Select после выбора элемента списка? 28.12.2015, 22:32. Показов 3958. Ответов 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 после выбора элемента списка?

Решение