Как визуально оформить select multiple?

Используя данный код, не получаю ожидаемого результата. Оформление select multiple остается стандартным, как будто я вообще никакой код не прописывал, т.е просто раскрытый выпадающий список, для выбора нужно нажимать ctrl + левая кнопка мыши. Подскажите, пожалуйста, где моя ошибка? Если это можно сделать как-то по другому, с другим оформлением, то тоже буду рад услышать совет по исправлению данного кода, главное чтоб была возможность осуществлять выбор показателей.

Для select id = "year" должна появиться возможность выбора галочками, как по отдельности каждый вариант, так и select all
Для select id = "station" должна появиться возможность выбора галочками: выбрать все, выбор группы, выбор по отдельности нужных пунктов.

&lt;body&gt; {% if form_visible %} &lt;style&gt; ...... &lt;/style&gt;  &lt;!-- Include Twitter Bootstrap and jQuery: --&gt; &lt;link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/&gt; &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;   &lt;!-- Include the plugin's CSS and JS: --&gt; &lt;script type="text/javascript" src="js/bootstrap-multiselect.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;    &lt;form method ="post" action="/"&gt;     &lt;label for="year"&gt;&lt;/label&gt;     &lt;select type="number" id = "year" name ="year" class="form-control selectpicker" data-live-search="true" multiple&gt;       &lt;option value="2014"&gt;2014&lt;/option&gt;       &lt;option value="2015"&gt;2015&lt;/option&gt;       &lt;option value="2016"&gt;2016&lt;/option&gt;     &lt;/select&gt;&lt;br&gt;&lt;br&gt;     &lt;script type="text/javascript"&gt;       $(document).ready(function() {           $('#year').multiselect({               includeSelectAllOption: true,               allSelectedText: 'No option left ...'           });       });   &lt;/script&gt;       &lt;label for="station"&gt;&lt;/label&gt;     &lt;select type="text" id ="station" name="station" class="form-control selectpicker" data-live-search="true" multiple&gt;       &lt;optgroup label="Челябинск"&gt;         &lt;option value="москва"&gt;москва&lt;/option&gt;         &lt;option value="станция1"&gt;станция1&lt;/option&gt;         &lt;option value="станция2"&gt;станция2&lt;/option&gt;       &lt;/optgroup&gt;       &lt;optgroup label="Питер"&gt;           &lt;option value="питер"&gt;питер&lt;/option&gt;           &lt;option value="станция3"&gt;станция3&lt;/option&gt;           &lt;option value="станция4"&gt;станция4&lt;/option&gt;       &lt;/optgroup&gt;     &lt;/select&gt;&lt;br&gt;&lt;br&gt;      &lt;script type="text/javascript"&gt;       $(document).ready(function() {           $('#station').multiselect({               enableClickableOptGroups: true           });       });   &lt;/script&gt; &lt;input type="submit" name="submit" class="btn btn-info" value="Применить" multiple/&gt; &lt;/form&gt;

<body> {% if form_visible %} <style> ...... </style>  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>  <script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <form method ="post" action="/"> <label for="year"></label> <select type="number" id = "year" name ="year" class="form-control selectpicker" data-live-search="true" multiple> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> </select><br><br> <script type="text/javascript"> $(document).ready(function() { $('#year').multiselect({ includeSelectAllOption: true, allSelectedText: 'No option left ...' }); }); </script> <label for="station"></label> <select type="text" id ="station" name="station" class="form-control selectpicker" data-live-search="true" multiple> <optgroup label="Челябинск"> <option value="москва">москва</option> <option value="станция1">станция1</option> <option value="станция2">станция2</option> </optgroup> <optgroup label="Питер"> <option value="питер">питер</option> <option value="станция3">станция3</option> <option value="станция4">станция4</option> </optgroup> </select><br><br> <script type="text/javascript"> $(document).ready(function() { $('#station').multiselect({ enableClickableOptGroups: true }); }); </script> <input type="submit" name="submit" class="btn btn-info" value="Применить" multiple/> </form>

Дополнительно:

1. в консоли нет ошибок?
2. $('#year') вообще находит?
3. попробовать указать атрибут multiple="multiple"
4. попробовать $('#year').multiselect() без опций

Зачем у вас jquery.min.js два раза подключается из разных мест?

Алексей Уколов, данный код копировал отсюда https://www.codehim.com/demo/bootstrap-multiselect...

iljaGolubev, в консоли вижу данные ошибки

127.0.0.1 - - [18/May/2023 11:06:08] "POST / HTTP/1.1" 200 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /css/bootstrap.min.css HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/jquery.min.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/bootstrap.min.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /css/bootstrap-multiselect.css HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/bootstrap-multiselect.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /css/bootstrap.min.css HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/jquery.min.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/bootstrap.min.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/bootstrap-multiselect.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /css/bootstrap-multiselect.css HTTP/1.1" 404 -

127.0.0.1 - - [18/May/2023 11:06:08] "POST / HTTP/1.1" 200 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /css/bootstrap.min.css HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/jquery.min.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/bootstrap.min.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /css/bootstrap-multiselect.css HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/bootstrap-multiselect.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /css/bootstrap.min.css HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/jquery.min.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/bootstrap.min.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /js/bootstrap-multiselect.js HTTP/1.1" 404 - 127.0.0.1 - - [18/May/2023 11:06:08] "GET /css/bootstrap-multiselect.css HTTP/1.1" 404 -

пункт 2. К сожалению, не знаю как это посмотреть
пункт 3 и 4 попробовал выполнить, но изменений не произошло

Ну так надо не "копировать отсюда", а хоть немного пытаться разобраться, что там написано (как минимум), и что вообще происходит.
Вы хоть скачали на сервер все эти файлы, которые пытаетесь подключать, и на которые у вас отдаётся 404?

Алексей Уколов, Извиняюсь, за возможно глупые вопросы, я новичок в этом и только разбираюсь еще.
На сервере вводил данную команду "npm install bootstrap@5.3.0-alpha3", остальные моменты подключения я так понял происходят через CDN

Dmitry Atroshchenko, и script

Для jquery выполнял на сервере такие команды

"Предполагая, что у вас уже были установлены Node.js и npm, мы сделали следующее:

Создайте папку и добавьте в нее какой-нибудь файл (или откройте существующий)
Установите TSD глобально с помощью следующей команды: npm install tsd -g
Устанавливаем файл определений типов jQuery в наш проект с помощью следующей команды: tsd install jquery --save"

Dmitry Atroshchenko,
Ну вот и ответ: файлы должны быть доступны по http.
http://{ваш хост тут}/css/bootstrap.min.css
http://{ваш хост тут}/css/bootstrap-multiselect.cs
http://{ваш хост тут}/js/jquery.min.js
http://{ваш хост тут}/js/bootstrap.min.js
http://{ваш хост тут}/js/bootstrap-multiselect.js

Если прям совсем новичок, то рано вам ещё с npm работать. сначала поймите как вообще всё взаимодействует.
Как настроить ваш проект мы не подскажем - мало данных.
Предположу, что сервер на nodejs - тогда пропишите статик роуты типа css/bootstrap.min.css, создайте директории css и js, скачайте и положите в них нужные файлы.

iljaGolubev, спасибо! серверная часть выполнена на flask, первый раз просто фронтом занимаюсь, решил добавить немного JS в оформлении

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
07.04.2024

Ответить

Для визуального оформления элемента с множественным выбором (select multiple) можно использовать CSS для изменения его внешнего вида. Вот несколько способов, как можно стилизовать такой элемент:

1. Использование псевдоэлемента ::after для добавления стрелки
html



		
		
			
			
XHTML
			
			  Option 1
  Option 2
  Option 3
			
				
					
				
					1
2
3
				
						  Option 1
  Option 2
  Option 3

css



		
		
			
			
CSS
			
			.styled-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('arrow.png') no-repeat right center;
  padding-right: 20px;
}
			
				
					
				
					1
2
3
4
5
6
7
				
						.styled-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('arrow.png') no-repeat right center;
  padding-right: 20px;
}

2. Использование фонового изображения для элемента
html



		
		
			
			
XHTML
			
			  Option 1
  Option 2
  Option 3
			
				
					
				
					1
2
3
				
						  Option 1
  Option 2
  Option 3

css



		
		
			
			
CSS
			
			.styled-select {
  background: url('arrow.png') no-repeat right center;
  padding-right: 20px;
}
			
				
					
				
					1
2
3
4
				
						.styled-select {
  background: url('arrow.png') no-repeat right center;
  padding-right: 20px;
}

3. Использование кастомных стилей для опций в элементе
html



		
		
			
			
XHTML
			
			  Option 1
  Option 2
  Option 3
			
				
					
				
					1
2
3
				
						  Option 1
  Option 2
  Option 3

css



		
		
			
			
CSS
			
			.option1 {
  background-color: #f1f1f1;
}
.option2 {
  background-color: #e0e0e0;
}
.option3 {
  background-color: #d1d1d1;
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						.option1 {
  background-color: #f1f1f1;
}
.option2 {
  background-color: #e0e0e0;
}
.option3 {
  background-color: #d1d1d1;
}

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

Как визуально оформить select multiple?

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как визуально оформить select multiple?

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно