Search the Community

Добрый день. Помогите решить проблемку. В chrom и Opera <select> <option>100g</option> </select> у g обрезаeтся хвостик.

Здравствуйте, дорогие форумчане. Я - новичок самоучка, поэтому для вас проблема может быть не очень сложная. Мне нужно сделать выпадающий список, как на рисунке. Интересует меня то, как сделать такие оглавления, как на изображении ("по сторам", "по товару"), чтоб они не выпадали вместе с option. Простите, если не совсем понятно и корректно выражаюсь!

<select> <option disabled>Имя Фамилия №телефона</option> <option>Андрей Мартыненко 123456789</option> <option>Кирил Богун 123321456</option> <option>Игорь Лях 258852123</option> </select> выводит: Имя Фамилия №телефона Андрей Мартыненко 123456789 Кирил Богун 123321456 Игорь Лях 258852123 а нужно с выравниванием каждой колонки: Имя Фамилия №телефона Андрей Мартыненко 123456789 Кирил Богун 123321456 Игорь Лях 258852123 пока спасаюсь анализом длины в php скрипте и добавлением &nbsp; тоесть своей функцией выравнивания, но может есть более простой метод, HTML5 свойство, или CSS

Здравствуйте. Подскажите хороший плагин кастомного селекта и таким же кастомным скроллом. Желательно 2 в 1. Ну или посоветуйте, как объединить.

Добрый день, помогите добиться следующего: Есть часть из кода: <tr> <td style="font-weight: bold; font-family: Arial; background-color: rgb(182, 225, 252); width: 30%;" class="calcul_num"> <select id="Sborka" name="sborka" onchange="getCost(this.form)"> <option value="1">Нет</option> <option value="2">Да</option> </select> </td> </tr> <tr> <td style="font-weight: bold; font-family: Arial; background-color: rgb(182, 225, 252); width: 30%;" class="calcul_num"> <select id="Fundament" name="fundament" onchange="getCost(this.form)"> <option value="1">Нет</option> <option value="2">Грунтозацепы</option> <option value="3">Брус</option> </select> </td> </tr> Хотелось бы что бы при выборе "нет" в первом меню ниже предлагалось бы <option value="1">Нет</option> <option value="2">Грунтозацепы</option> в при выборе "да" <option value="1">Нет</option> <option value="3">Брус</option> Спасибо. От @klierik: клади, пожалуйста, код в теги. Иначе тема может не пройти модерирование

есть скрипт заменяющий классы группе блоков и присваивающий определённый класс по ip function bir_0(){ $(".display").addClass('display_none'); $(".display").removeClass('display_block'); $("#bir_0").addClass('display_block'); $("#bir_0").removeClass('display_none');}function bir_1(){ $(".display").addClass('display_none'); $(".display").removeClass('display_block'); $("#bir_1").addClass('display_block'); $("#bir_1").removeClass('display_none');}function bir_2(){ $(".display").addClass('display_none'); $(".display").removeClass('display_block'); $("#bir_2").addClass('display_block'); $("#bir_2").removeClass('display_none');}function bir_3(){ $(".display").addClass('display_none'); $(".display").removeClass('display_block'); $("#bir_3").addClass('display_block'); $("#bir_3").removeClass('display_none');}код отлично работает в FF, но отказывается работать в Chrome (как работает в других браузерах не проверял), что не так? или предложите нормальный вариант, ибо это "топор"-ный вариант

Здравствуйте. В макете попалась форма поиска в виде зависимого выпадающего списка, где сначала нужно выбрать "Brend" и в зависимости от выбранного бренда, выбрать "Product" , потом уже нажимать Submit. Вопрос заключается в том, как правильно верстать такие формы поиска, чтобы можно было дальше передать программистам ?

Подскажите, как поймать событие, когда пользователь в элементе select выбирает option, который уже был выбран до этого. Вот если он option с каким-то другим value выбирает, то срабатывает событие change, а как поймать, если value то же самое?

Нужен такой select Почти сделал, но старые стили у select убрать не могу. Может кто знает как это сделать? http://codepen.io/anon/pen/EVrOaq

В общем, господа, имею макет, в котором наблюдаю такую форму(картинка прикреплена). 4 шага, с первым справился, а вот на втором - возникла проблема. фон и все элементы покрываются ещё одним слоем, будто select - модальное окно. если это так, то как его позиционировать, если padding элемента выше в %, а сам элемент в px? Шаг 3 - описание опций селекта. Придётся, видимо, подключать библиотеку select2. В общем, мои рассуждения таковы, Хочется услышать более опытных участников форума, что бы вы делали с таким блоком.

http://jsfiddle.net/Launder/1tahrusy/ <div class="feedback"> <p> Вы можете воспользоваться данной формой, для того, чтоб отправить нам сообщение. Мы будем рады почитать содержательный отзыв и надеемся на плодотворное сотрудничество! </p> <form action="#" method="post"> <p> <label for="Name">Имя:</label> <input type="name" name="autor" id="Name"> </p> <p> <label for="Mail">Email:</label> <input type="email" name="autormail" id="Mail"> </p> <p> <label for="type">Вид:</label> <select name="sort" form="mail" id="type"> <option value="general">общие вопросы</option> <option value="tech">технические вопросы</option> </select> </p> <p><b>Введите Ваше сообщение:</b></p> <p> <textarea class="announcement" name="comment"> </textarea> </p> <p><input type="submit" value="Отправить"></p> </form> </div>label { margin-right: 5px; width: 50px; text-align: right; float: left; line-height: 28px; }#Name, #Mail, #type { width: 250px; box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); color: #6d6d37; padding: 1px; padding-left: 10px; }Как сделать выравнивание label? Иными словами, надписи перед тремя верхними формами, сдвинуть чуть-чуть вверх?

Доброго всем дня,подскажите пожалуйста сделал форму на Bootstrap-е, все хорошо, но в форме два поля SELECT. Например select id="1" и select id="2". Селект "2" заблокирован, пока в 1-м не выберут какое либо значение. Селект "2" заблокировал "disabled". Я понимаю что нужно прописать функцию javaScript, но вот не могу ничего найти и подобрать. Помогите пожалуйста. Спасибо всем заранее.

Всем привет. проблема с отображением тега select со своим дизайном. Помогите разобраться как использовать свой дизайн для блока select Вот HTML код: <div><select><option>65x44x16,5</option></select></div>CSS код: div { width:134px; height:25px; background:url(../images/select4.jpg); display:inline-block; z-index:1;}div select { border-radius: 0; background: transparent;; padding: 3px; border: 0; font-size: 14px; line-height: 1; -webkit-appearance: none; cursor:pointer; width:134px; height:25px; z-index:0;}Вот как отображается в Yandex бразуер: Как отображается в IE:

Пытаюсь подобрать библиотеку для стилизации select Не могу найти ничего более-менее приемлемое. Много из перебранных плагинов не поддерживают выбор клавиатурой, есть через навороченные. Вот, например, это http://select2.github.io/select2/select-2.1.html бы подошло, но проблема в том, что не знаю как убрать поле поиска, которое отображается при открытии селекта. Может кто-то скажет, как можно его убрать (понятное дело через стили можно скрыть) но нет ли штатного способа. Или может посоветует другой плагин, безо всех там jQuery UI и прочих тяжелых навороченных библиотек. -- Стилизацию через CSS без js рассматривал, но не очень красиво получается. так как выпадающая область несколько больше самого селекта получается.

Бьюсь несколько дней не могу понять: Есть скрипт на JS которым наполняю список <select> при загрузке страницы document.getElementById(Id).options[num_option]=new Option(result[i]['Model'],result[i]['code_model'],false,false);где result это массив который заполняется из Mysql с помощью AJAX Далее через Jquery выбираю опцию которую делаю выбранной: $("#"+Id+" :contains("+model+")").attr("selected", "selected");$("#"+Id+" :contains("+model+")").prop("selected", true);Где model это переменная с текстовым значением выбранной опции ( Хотя это не принципиально т.к. при выборе установки по значению value все то-же самое о чем пойдет речь ниже). Так вот суть трабла: мне нужно узнать значение выбранной опции списка и передать его в функцию которая исполняется после установки данного селекта: document.getElementById('Id').value – мне всегда возвращает значение первой опции как и $('#Id’ option:selected').val(), хотя сам список благополучно заполняется и стоит на правильно выбранной опции. Причем если я перед этим напишу alert(‘xxx’), т.е. alert(‘xxx’); document.getElementById('Id').value то получаю правильное значение выбранной опции. Такое впечатление что нет готовности установки селекта. Хотя если подобный список сформировать например силами PHP т.е. не динамически то все опции определяются правильно. Для чего мне это нужно – чтобы установить взаимосвязанные списки на значение полученное из переменной URL. Я конечно могу передать в ту функцию значение непосредственно из URL, НО: 1) хочется разобраться что за хрень : ))) и 2) для установки цепочки взаимосвязанных селектов и событий, красивее и удобнее в программировании использовать обращение через значения самих селектов. Кстати попытки дождаться готовности событий типа $(document).ready(function () {document.getElementById('Id').valueИ здесь считывать значения селектов});$(windows).load(function () {document.getElementById('Id').valueИ здесь считывать значения селектов});Приводят к тому-же результату- т.е селект как-бы «все еще на первой опции» Вот собственно ) Что я делаю неправильно? Помогите пожалуйста

Не знаю как в других браузерах, но в Chrome событие keydown на селекте срабатывает через раз. Вот пример. Что надо сделать, чтоб увидеть баг: 1) добиться чтобы селект получил фокус (табом или мышой встать в него) 2) нажимаем Enter (выпадающее меню будет открываться/закрываться) 3) событие будет всплывать только когда меню открывается, но не когда закрывается Вопрос: как можно это победить, как отловить событие в обоих случаях?

Добрый день. Помогите, пожайлуста, советом. Хотелось бы чтобы выглядело вот так. В Firefox так и выглядит. А вот в других браузерах (Opera, Chrome) - вот так 1. Выравнивание select`а не по центру. Пробовал через padding, но тогда все "элементы выбора" select`а сдвигаются на фиксированное количество пикселей. А они имеют разную длину. И получается один по центру, а остальные со сдвигом вправо (в зависимости от длины). 2. Число в поле number отображается не четко по центру, а со сдвигом влево. Если наводишь на само поле - справа появляется стрелочки и тогда вроде по центру. Но без наведения виглядит не эстетично. Может можно эти стрелочки как-то принудительно отображать, а не только при наведении. Код: <style>input { font-size:15px; text-align:center; width:195px;}select { font-size:15px; text-align:center; width:202px; padding: 1px;}</style><body><select name="terminal_type"><option value="unknown" >Не установлено</option><option value="entry" selected>Въездной</option><option value="exit">Выездной</option></select><input type="number" name="id_owner" value="1" maxlength="5" min="0" max="65535"></body>

Начал разбираться с мультиселектом, понял принцип работы, нашел как реализовать, но столкнулся с проблемой. Проблема заключается в следующем: После выборки нужных нам <option> пытаюсь их отправить в созданную мною таблицу [table] в БД [multi] , но безрезультатно. ( Таблица содержит следующие ячейки: id(11) и select1 VARCHAR(255) SQL CREATE TABLE IF NOT EXISTS `table` ( `id` int(11) NOT NULL AUTO_INCREMENT, `select1` varchar(255) NOT NULL, PRIMARY KEY (`id`));PHP - index.php <?php$db = mysql_connect ("localhost","12345","12345");mysql_select_db ("multi",$db);mysql_query('SET NAMES utf8');mysql_query('SET CHARACTER SET utf8');?><!doctype html><html lang="en"><head><!-- Encoding utf8--><meta charset="utf-8"><!-- Meta, title, CSS, favicons, etc. --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- disable iPhone inital scale --><meta name="viewport" content="width=device-width; initial-scale=1.0"><!-- Name site --><title>Мультиселект</title><!-- Description --><meta name="Description" content=""><!-- Keywords --><meta name="Keywords" content=""><style type="text/css"> .holder { width:200px; float:left; } #add,#remove { display:block; width:100px; border:1px solid #ccc; background:#eee; padding:10px; } select { margin:0 0 10px 0; width:150px; font:12px tahoma; padding:5px; height:300px; } option { padding:10px; }</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function(){//========================================================================// Убираем пункты из главного списка //---------------------------------------------- // Используя кнопки $('#remove').click(function() { move_option('#select1','#select2'); }); //---------------------------------------------- //---------------------------------------------- // По двойному клику $('#select1 option').live('dblclick',function(){ $(this).appendTo('#select2'); }); //----------------------------------------------//========================================================================//========================================================================// Добавляем пункты в первый список //---------------------------------------------- // Используя кнопки $('#add').click(function() { move_option('#select2','#select1'); }); //---------------------------------------------- //---------------------------------------------- // По двойному клику $('#select2 option').live('dblclick',function(){ $(this).appendTo('#select1'); }); //----------------------------------------------//========================================================================//========================================================================// Считаем, что в главном списке находится перечень нужных нам материалов// При клике на submit выделяем все пункты в главном списке $('#select_all').click(function(){ $('#select1 option').attr('selected', 'selected'); });//========================================================================}); function move_option(id_1, id_2){ $(id_1+' option:selected').each(function(el) { // у элемента id_1 собираем выбранные опции (option:selected) и на каждую (each) из них вешанм ф-цию $(this).appendTo(id_2); // внутрь id_2 вставляем выбранные ранее опции });}</script></head><body style="overflow-y: scroll;"><form action="" method="post"><div class="holder"> <select multiple="multiple" id="select1" name="select1[]"></select> <a href="javascript:;" id="remove">>></a></div><div class="holder"> <select multiple="multiple" id="select2"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> </select> <a href="javascript:;" id="add"><<</a></div><input id="select_all" type="submit" name="submit333"/></form><!-- ОБРАБОТЧИК--><?phpif ($_REQUEST['submit333']) { print_r($_POST['select1']);//заносим введенный пользователем логин в переменную $login, если он пустой, то уничтожаем переменную//заносим введенный пользователем пароль в переменную $password, если он пустой, то уничтожаем переменную// если такого нет, то сохраняем данные$result2 = mysql_query ("INSERT INTO `table` (select1) VALUES('$select1')");// Проверяем, есть ли ошибкиif ($result2=='TRUE'){echo "добавленно";}else {exit ("отказанно"); //останавливаем выполнение сценариев } } ?> </body></html>Ссылка на все файлы, архив: https://drive.google.com/file/d/0B0Udvr_35FCoTHFudTRlNnJLMEk/edit?usp=sharing

Приветствую профессионалов и новичков. Столкнулся со следующей проблемой - как заблокировать изменение select при этом сделав его видимым в массиве $_POST. Аттрибут disabled для этих целей не подходит.

Возможно ли как-нибудь в теге Select отобразить степень? Обычным способом не работает: <select> <option>33 м²</option></select>

Везде работает, кроме двенадцатой Оперы: <select> <option>visible</option> <option style="display: none;">hidden</option> </select>Также не работает ф-ция hide из jquery.

Рассматривал я бутстрап и пришла в голову идея по стилизации селекта. HTML <span class="select"> <span class="select__wrap"> <select name="options"> <option value="option-1">Option 1</option> <option value="option-2">Option 2</option> <option value="option-3">Option 3</option> </select> </span></span>CSS .select,.select__wrap { display: inline-block;}.select,.select__wrap,.select__wrap select,.select__wrap option { font-size: 14px; line-height: 1em; vertical-align: bottom;}.select { border: red 3px dotted; border-radius: 5px;}.select__wrap { overflow: hidden;}.select__wrap select { margin: -1px; padding: 0;}Пример: http://codepen.io/GreatRash/pen/isjgL Работает во всех современных браузерах + IE Quirks Mode!

Как можно задать каждому элементу в выпадающем списке разные стили? К примеру хочу сделать каждую строку разного цвета.

Добрый день. Я еще зеленый... Есть такой скрипт. http://jsfiddle.net/V2tG4/3/ Смысл в том что я хочу стилями спрятать основной option и стилизовать его по-своему. Для этого в переменную h я поместил текст активного option. Дальше мне надо его обернуть в див .skinned-text и добавить в начало .skinnde-wrapper. Или же сам текст поместить в уже написаный в коде див. Не получается у самого, пишет что не объект а как сделать объектом? Благодарю за любую помощь.

столкнулся с проблемой, что в IE10 по умолчанию отключена возможность использования JavaScript (работает только в режиме совместимости). Поэтому вынужден прописывать: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">а вот дальше уже случается проблема верстки выпадающего списка. Использовал вот этот рецепт В ИЕ10, FF и Chrome всё норм отображается а вот в ИЕ10 в режиме совместимости отображается так: Возможно ли это как-то перебороть?