Javascript на что лучше заменить select

italic and bold
  

Объект диапазона Range имеет следующие свойства:

• startContainer , startOffset – узел и начальное смещение,
  • в примере выше: первый текстовый узел внутри тега

    и 2 .

  • в примере выше: первый текстовый узел внутри тега и 3 .
  • в примере выше: false
  • в примере выше:

  Методы Range

  Существует множество удобных методов для манипулирования диапазонами.

  Установить начало диапазона:

  • setStart(node, offset) установить начальную границу в позицию offset в node
  • setStartBefore(node) установить начальную границу прямо перед node
  • setStartAfter(node) установить начальную границу прямо после node

  Установить конец диапазона (похожи на предыдущие методы):

  • setEnd(node, offset) установить конечную границу в позицию offset в node
  • setEndBefore(node) установить конечную границу прямо перед node
  • setEndAfter(node) установить конечную границу прямо после node

  Как было показано, node может быть как текстовым узлом, так и элементом: для текстовых узлов offset пропускает указанное количество символов, в то время как для элементов – указанное количество дочерних узлов.

  • selectNode(node) выделить node целиком
  • selectNodeContents(node) выделить всё содержимое node
  • collapse(toStart) если указано toStart=true , установить конечную границу в начало, иначе установить начальную границу в конец, схлопывая таким образом диапазон
  • cloneRange() создать новый диапазон с идентичными границами

  Чтобы манипулировать содержимым в пределах диапазона:

  • deleteContents() – удалить содержимое диапазона из документа
  • extractContents() – удалить содержимое диапазона из документа и вернуть как DocumentFragment
  • cloneContents() – склонировать содержимое диапазона и вернуть как DocumentFragment
  • insertNode(node) – вставить node в документ в начале диапазона
  • surroundContents(node) – обернуть node вокруг содержимого диапазона. Чтобы этот метод сработал, диапазон должен содержать как открывающие, так и закрывающие теги для всех элементов внутри себя: не допускаются частичные диапазоны по типу abc .

  Используя эти методы, мы можем делать с выделенными узлами что угодно.

  Проверим описанные методы в действии:

  Нажмите на кнопку, чтобы соответствующий метод отработал на выделении, или на "resetExample", чтобы восстановить выделение как было. 
  italic and bold
   
  , extractContents() < let content = range.extractContents(); result.innerHTML = ""; result.append("Извлечено: ", content); >, cloneContents() < let content = range.cloneContents(); result.innerHTML = ""; result.append("Клонировано: ", content); >, insertNode() < let newNode = document.createElement('u'); newNode.innerHTML = "НОВЫЙ УЗЕЛ"; range.insertNode(newNode); >, surroundContents() < let newNode = document.createElement('u'); try < range.surroundContents(newNode); >catch(e) < alert(e) >>, resetExample() < p.innerHTML = `Example: italic and bold`; result.innerHTML = ""; range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); > >; for(let method in methods) < document.write(`
  ()">$
   `); > methods.resetExample(); 

  Также существуют методы сравнения диапазонов, но они редко используются. Когда они вам понадобятся, вы можете прочитать о них в спецификации или справочнике MDN.

  Selection

  Range это общий объект для управления диапазонами выделения. Мы можем создавать и передавать подобные объекты. Сами по себе они ничего визуально не выделяют.

  Выделение в документе представлено объектом Selection , который может быть получен как window.getSelection() или document.getSelection() .

  Выделение может включать ноль или более диапазонов. По крайней мере, так утверждается в Спецификации Selection API. На практике же выделить несколько диапазонов в документе можно только в Firefox, используя Ctrl + click ( Cmd + click для Mac).

  Ниже представлен скриншот выделения с 3 диапазонами, сделанный в Firefox:

  Остальные браузеры поддерживают максимум 1 диапазон. Как мы увидим далее, некоторые методы Selection подразумевают, что может быть несколько диапазонов, но, как было сказано ранее, во всех браузерах, кроме Firefox, может быть не более одного диапазона.

  Свойства Selection

  Аналогично диапазону, выделение имеет начальную границу, именуемую «якорем», и конечную, называемую «фокусом».

  Основные свойства выделения:

  • anchorNode – узел, с которого начинается выделение,
  • anchorOffset – смещение в anchorNode , где начинается выделение,
  • focusNode – узел, на котором выделение заканчивается,
  • focusOffset – смещение в focusNode , где выделение заканчивается,
  • isCollapsed – true , если диапазон выделения пуст или не существует.
  • rangeCount – количество диапазонов в выделении, максимум 1 во всех браузерах, кроме Firefox.

  Конец выделения может быть в документе до его начала

  Существует несколько методов выделить содержимое, в зависимости от устройства пользователя: мышь, горячие клавиши, нажатия пальцем и другие.

  Некоторые из них, такие как мышь, позволяют создавать выделение в обоих направлениях: слева направо и справа налево.

  Если начало (якорь) выделения идёт в документе перед концом (фокус), говорят, что такое выделение «направлено вперёд».

  К примеру, если пользователь начинает выделение с помощью мыши в направлении от «Example» до «italic»:

  Иначе, если выделение идёт от «italic» до «Example», выделение идёт в «обратном» направлении, его фокус будет перед якорем:

  Это отличается от объектов Range , которые всегда направлены вперёд: начало диапазона не может стоять после его конца.

  События при выделении

  Существуют события, позволяющие отслеживать выделение:

  • elem.onselectstart – когда с elem начинается выделение, например пользователь начинает двигать мышкой с зажатой кнопкой.
    • preventDefault() отменяет начало выделения.
    • Заметьте: этот обработчик можно поставить только на document .

    Демо отслеживания выделения

    Ниже представлено небольшое демо. В нём границы выделения выводятся динамически по мере того, как оно меняется:

    курсив и жирный
     От – До   

    Демо получения выделения

    Чтобы получить всё выделение:

    • Как текст: просто вызовите document.getSelection().toString() .
    • Как DOM-элементы: получите выделенные диапазоны и вызовите их метод cloneContents() (только первый диапазон, если мы не поддерживаем мультивыделение в Firefox).

    Ниже представлено демо получения выделения как в виде текста, так и в виде DOM-узлов:

    курсив и жирный
     Склонировано: // Получаем как текст astext.innerHTML += selection; >; 

    Методы Selection

    Методы Selection для добавления и удаления диапазонов:

    • getRangeAt(i) – взять i-ый диапазон, начиная с 0 . Во всех браузерах, кроме Firefox, используется только 0 .
    • addRange(range) – добавить range в выделение. Все браузеры, кроме Firefox, проигнорируют этот вызов, если в выделении уже есть диапазон.
    • removeRange(range) – удалить range из выделения.
    • removeAllRanges() – удалить все диапазоны.
    • empty() – сокращение для removeAllRanges .

    Также существуют методы управления диапазонами выделения напрямую, без обращения к Range:

    • collapse(node, offset) – заменить выделенный диапазон новым, который начинается и заканчивается на node , на позиции offset .
    • setPosition(node, offset) – то же самое, что collapse (дублирующий метод-псевдоним).
    • collapseToStart() – схлопнуть (заменить на пустой диапазон) к началу выделения,
    • collapseToEnd() – схлопнуть диапазон к концу выделения,
    • extend(node, offset) – переместить фокус выделения к данному node , с позиции offset ,
    • setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset) – заменить диапазон выделения на заданные начало anchorNode/anchorOffset и конец focusNode/focusOffset . Будет выделено всё содержимое между этими границами
    • selectAllChildren(node) – выделить все дочерние узлы данного узла node .
    • deleteFromDocument() – удалить содержимое выделения из документа.
    • containsNode(node, allowPartialContainment = false) – проверяет, содержит ли выделение node (частично, если второй аргумент равен true )

    Так что для многих задач мы можем вызывать методы Selection , не обращаясь к связанному объекту Range .

    К примеру, выделение всего параграфа

    :

    курсив и жирный
      

    То же самое с помощью Range :

    курсив и жирный
      

    Чтобы что-то выделить, сначала снимите текущее выделение

    Если выделение уже существует, сначала снимите его, используя removeAllRanges() , и только затем добавляйте новые диапазоны. В противном случае все браузеры, кроме Firefox, проигнорируют добавление.

    Исключением являются некоторые методы выделения, которые заменяют существующее выделение, например, setBaseAndExtent .

    Выделение в элементах форм

    Элементы форм, такие как input и textarea , предоставляют отдельное API для выделения. Так как значения полей представляют собой простой текст, а не HTML, и нам не нужны такие сложные объекты, как Range и Selection .

    • input.selectionStart – позиция начала выделения (это свойство можно изменять),
    • input.selectionEnd – позиция конца выделения (это свойство можно изменять),
    • input.selectionDirection – направление выделения, одно из: «forward» (вперёд), «backward» (назад) или «none» (без направления, если, к примеру, выделено с помощью двойного клика мыши).
    • input.onselect – срабатывает, когда выделение завершено.
    • input.select() – выделяет всё содержимое input (может быть textarea вместо input ),
    • input.setSelectionRange(start, end, [direction]) – изменить выделение, чтобы начиналось с позиции start , и заканчивалось end , в данном направлении direction (необязательный параметр).
    • input.setRangeText(replacement, [start], [end], [selectionMode]) – заменяет выделенный текст в диапазоне новым. Если аргументы start и end указаны, то они задают начало и конец диапазона, иначе используется текущее выделение. Последний аргумент, selectionMode , определяет, как будет вести себя выделение после замены текста. Возможные значения:
      • «select» – только что вставленный текст будет выделен.
      • «start» – диапазон выделения схлопнется прямо перед вставленным текстом (так что курсор окажется непосредственно перед ним).
      • «end» – диапазон выделения схлопнется прямо после вставленного текста (курсор окажется сразу после него).
      • «preserve» – пытается сохранить выделение. Значение по умолчанию.

      Давайте посмотрим на эти методы в действии.

      Пример: отслеживание выделения

      К примеру, этот код использует событие onselect , чтобы отслеживать выделение:

       Выделите что-нибудь в этом тексте, чтобы обновить значения ниже. 
      От – До   

      • onselect срабатывает при выделении чего-либо, но не при снятии выделения.
      • событие document.onselectionchange не должно срабатывать при выделении внутри элемента формы в соответствии со спецификацией, так как оно не является выделением элементов в document . Хотя некоторые браузеры генерируют это событие, полагаться на это не стоит.

      Пример: изменение позиции курсора

      Мы можем изменять selectionStart и selectionEnd , устанавливая выделение.

      Важный граничный случай – когда selectionStart и selectionEnd равны друг другу. В этом случае они указывают на позицию курсора. Иными словами, когда ничего не выбрано, выделение схлопнуто на позиции курсора.

      Таким образом, задавая selectionStart и selectionEnd одно и то же значение, мы можем передвигать курсор.

       Переведите фокус на меня, курсор окажется на 10-й позиции  

      Пример: изменение выделения

      Чтобы изменять содержимое выделения, мы можем использовать метод input.setRangeText . Конечно, мы можем читать selectionStart/End и, зная позиции выделения, изменять соответствующую подстроку в value , но setRangeText намного мощнее и, зачастую, удобнее.

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

      В этом примере выделенный текст будет обёрнут в *. * :

      Передавая больше параметров, мы можем устанавливать start и end .

      В этом примере мы найдём «ЭТО» в поле ввода, заменим его и оставим заменённый текст выделенным:

      Пример: вставка на месте курсора

      Если ничего не выделено, или мы указали одинаковые start и end в методе setRangeText , то текст просто вставляется, и ничего не удаляется.

      Мы также можем вставить что-нибудь на текущей позиции курсора, используя setRangeText .

      Кнопка в примере вставляет «ПРИВЕТ» на месте курсора и устанавливает его после вставленного текста. Если какой-то текст был выделен, он будет заменён (мы можем узнать о наличии выделения, проверив selectionStart!=selectionEnd и, если выделение есть, сделать что-то ещё):

      Сделать что-то невыделяемым

      Существуют три способа сделать что-то невыделяемым:

      Используйте CSS-свойство user-select: none .

       #elem 
      Можно выделить 
      Можно выделить

      Можно выделить 
      Можно выделить
        

      Ссылки

      • Спецификация DOM: Range
      • Selection API
      • Спецификация HTML: API для выделения в элементах управления текстом

      Итого

      Мы подробно рассмотрели два разных API для выделения:

      1. Для документа: объекты Selection и Range .
      2. Для input , textarea : дополнительные методы и свойства.

      Второе API очень простое, так как работает с текстом.

      Самые используемые готовые решения:

      let selection = document.getSelection(); let cloned = /* элемент, в который мы хотим скопировать выделенные узлы */; // затем применяем методы Range к selection.getRangeAt(0) // или, как здесь, ко всем диапазонам, чтобы поддерживать множественное выделение for (let i = 0; i

      let selection = document.getSelection(); // напрямую: selection.setBaseAndExtent(. from. to. ); // или можно создать диапазон range и: selection.removeAllRanges(); selection.addRange(range);

      И пару слов о курсоре. Позиция курсора в редактируемых элементах, таких как , всегда находится в начале или конце выделения.

      Мы можем использовать это, как для того, чтобы получить позицию курсора, так и чтобы переместить его, установив elem.selectionStart и elem.selectionEnd .

      P.S. Если вам нужна поддержка старого IE8-, посмотрите в архивную статью.

      Курсы javascript

      В базе данных есть некая таблица. Так же есть две страницы (код — ниже). Чтобы не «метаться» между мелкими файлами — объединил html+js+css в index.php.

      Что есть сейчас:
      1 — Кнопка «Text» добавляет в .Container текст, который в данный момент выбран в select’е.
      2 — Кнопка «Test» добавляет три предопределённых значения (в теге sсript)в select, затем обращается при помощи XHR в js к файлу test.php. Test.php обращается к базе за списком значений первого столбца (рандомны, уникальны), отдаёт результат обратно и добавляет ответ в .Container без перезагрузки страницы (при помощи innerHTML).
      3 — Кнопка «^W» очищает .Container.

      Что нужно:
      При нажатии кнопки «Test» скрипт должен добавлять в список select значения, полученные из базы.
      Т.е., если select был вначале таким:[«text1», «text2», «text3»], то после нажатия должен стать таким:[«a»,»b»,»c»,»d»,»e»].

           function Test() < Container = document.getElementById('Container'); Selector = document.getElementById('Selector'); Selector.options[0] = new Option('text0','value0'); Selector.options[1] = new Option('text1','value1',false,true); Selector.options[2] = new Option('text2','value2'); req = new XMLHttpRequest(); req.open('POST','/test/test.php',true); req.onreadystatechange = processRequestChange; req.send(null); function processRequestChange() < if (req.readyState == 4) < if (req.status == 200) < Container.innerHTML = req.responseText; >> else < Container.innerHTML = 'Error!
      '+'req.readyState: '+req.readyState+'
      '+'req.statusText: '+req.statusText+'
      '+'req.status: '+req.status; > > Container.innerHTML = req.responseText; > function Text() < Container.innerHTML = Selector.options[Selector.selectedIndex].text; >function Clear() html  WUT?!  
      What do you want to see?     

      Последний раз редактировалось TrogWar, 15.04.2012 в 15:09 . Причина: Корректировка форматирования и очепяток

      16.04.2012, 13:27
      Регистрация: 08.02.2012
      Сообщений: 34

      ну во первых, у тебя test.php смешной. запусти его отдельно в окне — наверняка поймешь что к чему!
      $result — массив объектов. так его не вывести.
      если чё, погугли как выводить инфу с базы средствами php. тема избита.

      во вторых: может имеет смысл забирать данные посредством JSON,
      мне однажды эту тему популярно разжевали:
      Сколько объектов/массивов содержит JSON
      и соответственно вставлять данные в selectы с возвращенного JSON (ассоциативный массив)
      то бишь в test.php:
      $rows = array();
      while($r = mysql_fetch_assoc($result)) $rows[] = $r;
      >
      print json_encode($rows);
      ну а в Javascript работаешь как с любым другим массивом.

      НО: если будешь так делать, сначала просто выведи полученный JSON, дабы изучить его строение, шоб правильно обращаться к паре ключ:значение, а то я тогда лоханулся. часа 2 искал баг, которого не было
      и еще: не забудь кодировать в utf8 и не выводи массив с тысячами записей, а то нарвешься вот на это —
      Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 22806573 bytes).
      ну или не кодируй, и выводи сколько хош. пока не нарвешься..)))

      Последний раз редактировалось Le-mark43, 16.04.2012 в 13:51 . Причина: правка
      16.04.2012, 13:36
      Регистрация: 05.10.2011
      Сообщений: 85
      Запросы с json ответами можно смотреть в firebug-е, и прочих инспекторах (хром, опера).
      16.04.2012, 21:33
      Интересующийся
      Регистрация: 15.04.2012
      Сообщений: 12

      Конечно же смешной — я и не собираюсь открывать test.php, иначе бы дописал остальную html-заглушку и переделал массив в строку текста через mysql_fetch_array() и цикл. Но мне-то нужно передать обратно массив, а не строку.

      За инфу про JSON спасибо про такой метод я как раз не задумался.
      У меня кириллицы практически никакой нет и не будет — все в utf-8, так что минус проблема.

      Про выделение памяти это очень важное дополнение! Как тогда быть, если в перспективе из мускула будут таким образом вытаскиваться по 7-10 столбцов по 3000-4000 значений в каждом? Должна быть возможность выведения всех этих строк сразу на страницу.
      Что-нибудь можете посоветовать чтобы избежать той ошибки с памятью?

      16.04.2012, 23:15
      Регистрация: 08.02.2012
      Сообщений: 34

      насчет этого не парься пока, практика показывает, что такое появляется, в основном при выводе в кодировке в utf8, ты как нить посмотри, Json строк на 10 при хотя бы 5 столбцах (записи в базе в кириллице), ужаснёшься.
      да поправят меня профессора, но utf8 кодирует кириллические символы длинной аж до 6 байт, для сравнения омериканские символы и символы unicode как и asci — до 2 байт.
      поэтому если выводишь в кодировке 1251, можно особо не париться, 3000 строк на 15 столбцов, нихрена не пустых — выводятся за милую душу.
      но на всякий пожарный, дабы не переборщить делают через try<>catch<>, как не знаю, скоро предстоит и мне с этим разбираться.

      16.04.2012, 23:23
      Регистрация: 08.02.2012
      Сообщений: 34

      Да, кстати, кто-то говорил, что объем памяти можно выставить в профайле Apache, (denwer). погугли! вдруг тебе больше повезёт.

      19.04.2012, 06:17
      Интересующийся
      Регистрация: 15.04.2012
      Сообщений: 12

      Le-mark43, спасибо за информацию! Объём можно, а я и позабыл об этом..

      Таблица из 4х столбцов: один char и три float’а. char будет только где-то в ~10% случаев (не более) написан кириллицей. Апач, мускул, пхп, все страницы принудительно настроены на работу в utf-8 (general).
      Насколько я читал, между cp1251 и utf-8 только в кириллице — на каждую букву юник выделяет два байта вместо одного как в 1251, а вот для латиницы всё одинаково.
      То бишь, если передаётся много кириллицы в utf-8, то, фактически, увеличивается весь трафик в два раза, что не есть гуд.
      Плюс надо учитывать момент, что при урезании кириллической (и только!) строки (например, «text.length-1») будет отрезан только один из двух бит буквы. Последствия очевидны (:

      Но это всё лирика.. Вот чего я боюсь — переполнения памяти, слишком сильного пожирания трафика или урезания данных при передаче на узком месте между test.php и index.php по XHR’у.
      Есть ли разница — передавать с помощью JSON или тупо строкой (echo в test.php и req.responseText в test.js)? Пока что ничего конкретного, чтобы всё в одном месте собрано было, не нашёл =/

      20.04.2012, 20:11
      Регистрация: 08.02.2012
      Сообщений: 34

      как передавать лично я разницы не видел, главное, чтоб на выходе из php у тебя был массив, дабы потом в js его можно было свободно обработать.
      просто массив формировать гораздо удобнее JSONом, он для этого походу и создан был
      по поводу утф8 и кириллицы, я, чем больше нарывался на ошибку с памятью, тем больше понимал, что память тут вообще не причем.
      Allowed memory size of 134217728 bytes exhausted (tried to allocate 22806573 bytes).
      если перевести, то это означает:
      допустимый размер памяти 134217728 байт исчерпан (попытка выделить 22806573 байта),
      первая цифра всегда больше второй, зависит она от настрйки профиля в апаче, максимум 128 метров, как и говорится в сообщении об ошибке.
      вопрос: если максимально можно использовать 128 метров, то какого хрена не можешь выделить 21,7 метра?
      хотя возможно цифра в скобках означает на сколько превышен лимит.
      Причем, я заметил, что так бывает не всегда, иногда при выводе этого же объема информации (не такого же, а именно этого же), такой штуки не вылезает, а почему?
      вообщем, что бы там не говорили, не верю я в нехватку памяти для обработки скрипта, ну а поскольку предложений по решению у меня нет, то и говорю, аккуратнее с количеством записей в утф8.))

      Стилизация Select-Option (почти) без JavaScript

      Стилизация некоторых стандартных элементов — довольно нетривиальная задача.

      Разумеется, хороший специалист может стилизовать что угодно, однако всё упирается в сложность этого действия.

      Для стилизации радиокнопок и чекбоксов потребуется совсем немного времени — идея стилизации label со скрытыми input не нова, и давно и повсеместно используется.

      Для стилизации остального — есть JavaScript.

      Сегодня я хочу рассказать Вам о том, как можно относительно просто стилизовать выпадающие списки, с минимальным кодом JavaScript (от 0 до 26 строк) и минимальной дополнительной разметкой HTML.

      

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

      И вот, когда я уже почти закончил писать очередную жуткую конструкцию, призванную заменить несчастный Select, у меня возник вопрос:

      А зачем?

      Обычно этот вопрос ведёт к умудрённой прокрастинации, переосмыслению жизни и т.д., но в этот раз что-то пошло не так, и я понял, что вопрос и правда был хорошим, а главное — полезным.

      Небольшой ликбез:

      Итак, для тех, кто в танке, а также тех, кому выпадающие списки доставили столько боли, что они решили забыть о них, как о страшном сне, я немножко (правда) напомню о том, что это такое.

      Выпадающие списки состоят из 2 основных элементов:

      1. Select — контейнер для всего списка
      2. Option — элемент списка

      Основной функционал выпадающего списка — отправка информации о выбранном(ых) пункте(ах) на сервер.

      Для полноты картины, вот список атрибутов элементов (чтобы можно было оценить, сколько из них будут реализованы):

      1. Select — disabled , form , multiple , name , required , size
      2. Option — disabled , label , selected , value

      Уже было написано немало слов, поэтому — ближе к коду:

       
       
      Описание 0 пункта
       Описание 0 пункта Описание 1 пункта Описание 2 пункта 
       
       

      Итак, чем же хорош этот код? (всё, без чего можно обойтись при объяснении, убрано специально)

      Давайте отметим, какие пункты из функционала Select и Option автоматически стали возможны, за счёт использования input + label:

      1. Select — form, name, required
      2. Option — disabled, label, selected, value
      1. Select — disabled, multiple, size
      2. Option — полностью реализовано

      Чтобы реализовать пункт Select.multiple (множественный выбор) — достаточно сделать так:

       
       
       Описание 0 пункта Описание 1 пункта Описание 2 пункта 
       
       

      Мы всего-навсего меняем тип input’ов с Radio на Checkbox, и получаем практически полный аналог multiple.

      Разница в том, что для множественного выбора не нужно зажимать ctrl (ну а если кто-то хочет полностью имитировать функционал — JavaScript в помощь).

      Что осталось?

      1. Select — disabled, size
      2. Option — полностью реализовано
      • Select.size — какой зададите размер, такой и будет. Необходимо будет просто добавить контейнер.
      • Select.disabled — для контейнера нужно добавить pointer-events: none , чтобы отменить реакцию на любые действия пользователя (наведение, клики и т.д.), ну и можно сделать его чуть прозрачным.

      Нужно также добавить автозаполнение заголовка для выпадающего меню с единственным выбором, а также возникнет проблема при сбросе формы (кнопка Reset), т.к. заголовок не сбросится. Но и это — вполне решаемо (с помощью JavaScript).

      А теперь — примеры:

      Немного реализации (выпадающее меню с единичным выбором):

      И ещё немного (не выпадающее меню с множественным выбором):

      Бонус: не знаю, зачем я это сделал, но… выпадающее меню с единичным выбором и работающим на CSS сбросом заголовка:

      Зачем это нужно?

      В связи с тем, что судя по комментариям, не все понимают, для чего будет полезен данный код, считаю нужным дать некоторые разъяснения.

      При стилизации выпадающих списков вида:

       Пункт 1 Пункт 2  

      есть серьёзные ограничения стилизации. Поэтому их заменяют на простые списки:

      которым с помощью JavaScript навешивают весь необходимый функционал.

      Поскольку изначально списки никак не взаимодействуют с формами, из-за этого возникают проблемы.

      Мало того, что необходимо реализовать весь основной функционал:

      • переключение пунктов и их взаимодействие
      • состояния (checked, disabled)
      • привязка к форме и отправка данных на сервер
      • инициализация исходных данных (автозаполнение)
      • сброс формы (при нажатии на кнопку «reset» список нужно вернуть в состояние при инициализации)

      Фактически, если в JavaScript что-то ломается, не важно, из-за чего — скрипт не догрузился, возник баг, внесли правки — при возникновении любой проблемы выпадающий список превращается в… что-то, выглядящее как выпадающий список, но не работающее.
      Вообще. Никак.

      Для пользователя это будет выглядеть так: есть выпадающий список, но работать с ним нельзя.

      Для сервера это будет выглядеть ещё «веселее» — пришла форма, в которой не хватает части данных. Хорошо, что такую ситуацию заранее предусмотрели при разработке… Ведь предусмотрели, правда?

      Плюсы получившегося решения:

      • Весь основной функционал (смотри выше), кроме сброса заголовка ВСЕГДА будет работать. Даже если у человека вообще отключён JavaScript (хоть это и стало практически неактуально). Единственное, что может пойти не так — нельзя будет открыть список. Но и в этом случае отправится значение по умолчанию, плюс смену состояний — список открыт/закрыт — можно реализовать прямо в коде html (защита от проблем с файлом JS), или вообще открывать по наведению.
      • Данного функционала достаточно для большинства подобных списков. Да, возникнут проблемы у людей, использующих дополнительный функционал (об этом ниже). Но в случае со списком на ul — li для работы и вовсе требуется библиотека, и много что может пойти не так.

      Минусы (доп. функционал, который не реализован, и добавляется JavaScript’ом / библиотеками):

      • Переключение с помощью tab
      • Управление стрелками (в стандартном select можно менять выбранный пункт кнопками вверх-вниз)
      • Озвучка скринридерами (для людей, у которых проблемы со зрением текст на странице озвучивается)
      • Не работает как нативный select на мобильных (на мобильных select довольно удобно работает сам по себе. При желании можно определять устройство и подменять на стандартный select)
      • Список не умеет выпадать вверх, если снизу край вьюпорта (JS сделает это)
      • Группировка пунктов (аналог OptGroup) (сложно, и очень редко встречается)

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

      Добро пожаловать в мир, где Ваши библиотеки для стилизации Select-Option-подобных списков станут чуточку меньше, а работа с этими списками без библиотек — почти комфортной!

      UPD: как оказалось, в случае с чекбоксами атрибут required работает некорректно, и его также необходимо эмулировать с помощью JavaScript (на данный момент обязательными становятся все чекбоксы, отмеченные как required, и только они)

      Похожие публикации:

      1. Как написать триггер sql
      2. Как нарисовать таблицу в питоне
      3. Кто в it зарабатывает больше всех
      4. Сжимать изображения с помощью mrc что это