Как визуально оформить select multiple?
Используя данный код, не получаю ожидаемого результата. Оформление select multiple остается стандартным, как будто я вообще никакой код не прописывал, т.е просто раскрытый выпадающий список, для выбора нужно нажимать ctrl + левая кнопка мыши. Подскажите, пожалуйста, где моя ошибка? Если это можно сделать как-то по другому, с другим оформлением, то тоже буду рад услышать совет по исправлению данного кода, главное чтоб была возможность осуществлять выбор показателей.
Для select id = "year" должна появиться возможность выбора галочками, как по отдельности каждый вариант, так и select all
Для select id = "station" должна появиться возможность выбора галочками: выбрать все, выбор группы, выбор по отдельности нужных пунктов.
<body> {% if form_visible %} <style> ...... </style> <!-- Include Twitter Bootstrap and jQuery: --> <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> <!-- Include the plugin's CSS and JS: --> <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> |
<body> {% if form_visible %} <style> ...... </style> <!-- Include Twitter Bootstrap and jQuery: --> <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> <!-- Include the plugin's CSS and JS: --> <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() без опций
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
Для jquery выполнял на сервере такие команды
"Предполагая, что у вас уже были установлены Node.js и npm, мы сделали следующее:
Создайте папку и добавьте в нее какой-нибудь файл (или откройте существующий)
Установите TSD глобально с помощью следующей команды: npm install tsd -g
Устанавливаем файл определений типов jQuery в наш проект с помощью следующей команды: tsd install jquery --save"
Ну вот и ответ: файлы должны быть доступны по 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, скачайте и положите в них нужные файлы.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для визуального оформления элемента с множественным выбором (select multiple) можно использовать CSS для изменения его внешнего вида. Вот несколько способов, как можно стилизовать такой элемент:
1. Использование псевдоэлемента ::after для добавления стрелки
```html
Option 1 Option 2 Option 3
```
```css
.styled-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('arrow.png') no-repeat right center; padding-right: 20px; }
```
2. Использование фонового изображения для элемента
```html
Option 1 Option 2 Option 3
```
```css
.styled-select { background: url('arrow.png') no-repeat right center; padding-right: 20px; }
```
3. Использование кастомных стилей для опций в элементе
```html
Option 1 Option 2 Option 3
```
```css
.option1 { background-color: #f1f1f1; } .option2 { background-color: #e0e0e0; } .option3 { background-color: #d1d1d1; }
```
Выберите один из вышеперечисленных способов или комбинируйте их, чтобы стилизовать элемент согласно вашим дизайнерским предпочтениям. Не забудьте протестировать визуальное оформление на различных браузерах и устройствах, чтобы убедиться, что оно отображается корректно.