При печати веб-страницы с тегом select на ней, выпадающий список будет выглядеть так же как и на экране.
Конечно, в таком виде он совершенно не нужен и бесполезен. Он может даже скрывать совершенно необходимые детали, важные для понимания того, что напечатано (например, набор параметров продукта).
Увы, я не знаю по настоящему простого и красивого способа обойти этот недостаток. Один из наилучших вариантов - продублировать содержимое каждого select`а неупорядоченным списком. И скрыть эти списки для всех устройств, кроме принтера. На мой взгляд, это наиболее простой и удобный подход к решению проблемы.
И так, сформулируем, что должен сделать скрипт (используя jQuery):
- Выберем все select`ы на странице.
- вставим div с вложенным ul после каждого select`а.
- Переберем все option`ы в каждом select`е и добавим соответствующие li в ul.
- Сделаем div невидимым для всех типов устройств, кроме принтера.
$(function(){ $("select").each(function(i){ var $el = $(this); var $options = $el.find("option"); var ul = "<div class='print-select'><ul>"; $options.each(function() { var $t = $(this); if($t.attr('selected')) ul += "<li class='selected'>"+$t.text()+"</li>"; else ul += "<li>"+$t.text()+"</li>"; }); ul += "</ul></div>"; $el.after(ul); }); });
Как вариант, такой список можно подготавливать на стороне сервера.


Есть пара замечаний: 1. перенести логику с js на серверный скрипт.
2. С точки зрения производительности, эффективнее производить меньше операций с домом, поэтому сначала сформируйте строчку, а потом в конце сделайте один append!
@Piumosso,
1. переносить логику на сервер не всегда имеет смысл
2. спасибо, поправил