\u041d\u0430\u0434\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043b\u0438\u0431\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 select \u0432 django. \u0424\u043e\u0440\u043c\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0435\u0441\u0442\u044c \u0432 HTML+css+js (\u0442\u0430\u043c \u043f\u043b\u044e\u0441\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f bootstrap.min.css \u0441\u0442\u0438\u043b\u0438)
\nHTML: {% load static %} <link type=»text\/css» href=»{% static ‘carshop\/css\/mycss\/styleForSelectMark.css’%}» rel=»stylesheet» > <div class=»wrapper » > <div class=»form-floating «> <div class=»select-btn form-select» name = «floatingSelectMark» id=»floatingSelectMark»> <span id = «spantext»>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043c\u0430\u0440\u043a\u0443<\/span> <\/div> <label for=»floatingSelectMark»>\u041c\u0430\u0440\u043a\u0430<\/label> <div class=»content»> <div class=»search»> <i class=»uil uil-search»><\/i> <input spellcheck=»false» type=»text» placeholder=»\u041f\u043e\u0438\u0441\u043a»> <\/div> <ul class=»options» ><\/ul> <div class=»get-all-marks»> <button type=»button» class=»btn btn-primary» id = «loadAllMarks»>\u0412\u0441\u0435 \u043c\u0430\u0440\u043a\u0438<\/button> <\/div> <\/div> <\/div> <\/div> <script src=»{% static ‘carshop\/js\/jquery-3.7. min.js’ %}» rel=»stylesheet» ><\/script> <script src=»{% static ‘carshop\/js\/myjs\/scriptSelectMark.js’ %}» rel=»stylesheet» ><\/script> CSS: \/* Import Google Font — Poppins *\/
\n@import url(‘ s:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap’);
\n*{ margin: 0; padding: 0; box-sizing: border-box; font-family: ‘Poppins’, sans-serif;
\n}
\n::selection{ color: #fff; background: #4285f4;
\n}
\n.wrapper{ —bs-form-select-bg-img: url(«data:image\/svg+xml,%3csvg xmlns=’ :\/\/www.w3.org\/2000\/svg’ viewBox=’0 0 16 16’%3e%3cpath fill=’none’ stroke=’%23343a40′ stroke-linecap=’round’ stroke-linejoin=’round’ stroke-width=’2′ d=’m2 5 6 6 6-6’\/%3e%3c\/svg%3e»); width: 100%; }
\n.select-btn, li{ display: flex; align-items: center; cursor: pointer;
\n}
\n.select-btn{ padding: .375rem 2.25rem .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 5; color: var(—bs-body-color); background-color: var(—bs-body-bg); background-image: var(—bs-form-select-bg-img), var(—bs-form-select-bg-icon, none); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; border: var(—bs-border-width) solid var(—bs-border-color); border-radius: var(—bs-border-radius); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none
\n}
\n.select-btn i{ font-size: 31px; transition: transform 0.3s linear;
\n}
\n.wrapper.active .select-btn i{ transform: rotate(-180deg);
\n}
\n.content{ position:absolute; width: 100%; display: none; padding: 0.5rem 0rem 0.5rem 0rem; margin-top: 0rem; background: #fff; border-radius: 7px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
\n}
\n.wrapper.active .content{ display: block;
\n}
\n.content .search{ position: relative; z-index:1000;
\n}
\n.search i{ top: 50%; left: 15px; color: #999; font-size: 20px; pointer-events: none; transform: translateY(-50%); position: absolute;
\n}
\n.search input{ height: 50px; width: 100%; outline: none; font-size: 17px; border-radius: 5px; padding: 0 20px 0 43px; border: 1px solid #B3B3B3;
\n}
\n.search input:focus{ padding-left: 42px; border: 2px solid #4285f4;
\n}
\n.search input::placeholder{ color: #bfbfbf;
\n}
\n.content .options{ position: relative; z-index: 1000; margin-top: 10px; max-height: 19rem; overflow-y: auto; padding-right: 7px; width: 100%; background: #fff; border: 2px solid #B3B3B3; border-radius: 5px;
\n}
\n.content .get-all-marks{ position: relative; z-index: 100; margin-top: -0.8rem; width: 100%;
\n}
\n.options::-webkit-scrollbar{ width: 7px;
\n}
\n.options::-webkit-scrollbar-track{ background: #f1f1f1; border-radius: 25px;
\n}
\n.options::-webkit-scrollbar-thumb{ background: #ccc; border-radius: 25px;
\n}
\n.options::-webkit-scrollbar-thumb:hover{ background: #b3b3b3;
\n}
\n.options li{ font-size: 1rem;
\n} .options li:hover, li.selected{ border-radius: 5px; background: #f2f2f2;
\n} JS: const wrapper = document.querySelector(«.wrapper»),
\nselectBtn = wrapper.querySelector(«.select-btn»),
\nsearchInp = wrapper.querySelector(«input»),
\noptions = wrapper.querySelector(«.options»);
\nvar mark_name = document.getElementById(‘mark_name’);
\nconst selected_model_name = document.querySelector(‘#model_name option:checked’) \/\/\u041f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043c\u0430\u0440\u043e\u043a \u0432 Select \u043c\u0430\u0440\u043e\u043a
\n\/\/\u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u0430\u0440\u043e\u043a addMarks() \u0432 Select
\n$(document).ready(function(){
\n$.ajax({ url: ‘\/getmark’, type: ‘GET’, success: function(result){ var marks = result.marks.slice() marksList = marks.slice() addMarks(); } }) } );
\n\/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0441\u0435\u0445 \u043c\u0430\u0440\u043e\u043a \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0435\u0439 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u041d\u0430\u0434\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043b\u0438\u0431\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 select \u0432 django. \u0424\u043e\u0440\u043c\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0435\u0441\u0442\u044c \u0432 HTML+css+js (\u0442\u0430\u043c \u043f\u043b\u044e\u0441\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f bootstrap.min.css \u0441\u0442\u0438\u043b\u0438)
\nHTML: {% load static %} <link type=»text\/css» href=»{% static ‘carshop\/css\/mycss\/styleForSelectMark.css’%}» rel=»stylesheet» >…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[22],"class_list":["post-23782","post","type-post","status-publish","format-standard","hentry","category-flrusoft","tag-22"],"_links":{"self":[{"href":"https:\/\/texnolenta.ru\/job\/wp-json\/wp\/v2\/posts\/23782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/texnolenta.ru\/job\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/texnolenta.ru\/job\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/texnolenta.ru\/job\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/texnolenta.ru\/job\/wp-json\/wp\/v2\/comments?post=23782"}],"version-history":[{"count":0,"href":"https:\/\/texnolenta.ru\/job\/wp-json\/wp\/v2\/posts\/23782\/revisions"}],"wp:attachment":[{"href":"https:\/\/texnolenta.ru\/job\/wp-json\/wp\/v2\/media?parent=23782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/texnolenta.ru\/job\/wp-json\/wp\/v2\/categories?post=23782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/texnolenta.ru\/job\/wp-json\/wp\/v2\/tags?post=23782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}