как запретить отображение опций html select

Question

Я пытался присоединиться к событиям onclick и onchange, но не добился большого успеха.

Конечная цель - наложить div или ul и отобразить варианты, гдепользователь может нажать;это затем изменит параметр в поле выбора.Возможно ли это сделать?

Я опробовал здесь некоторый код.Неработающий пример можно найти ниже:

http://jsfiddle.net/deostroll/Yed7p/1/

Разметка для раскрывающегося списка:

<select>
    <option value="000">Select A Country</option>
    <option value="001">India</option>    
    <option value="002">Australia</option>    
    <option value="003">United States Of America</option>
    <option value="004">Great Britan</option>
    <option value="005">Zimbabwe</option>
    <option value="006">Newzeland</option>    
</select>

Вот код JavaScript:

$(function(){
    $('select').click(function(e){      
        var ul = document.createElement('ul');
        $(this).children().each(function(){
            var li = document.createElement('li');
            $(li).html($(this).text());
            $(li).data("value", $(this).val());
            $(ul).append(li);
        });
        $('body').append(ul);
        var cordinates = $(this).offset();
        $(ul).offset({top:cordinates.top + 10 + $(this).height(), left:cordinates.left});
        $(ul).show('slow');
        e.preventDefault();
    }); 
});

Проблема здесь в том, что когда я нажимаю на раскрывающийся список, параметры отображаются по умолчанию.Я пытаюсь предотвратить это.И, кстати, я делал все это упражнение в браузере Google Chrome.Позже я собираюсь протестировать и другие браузеры.Я знаю, что есть библиотеки, которые делают это, но я просто хотел узнать, какой метод используется.

Answer 1

AFAIK, нет способа сделать это. Лучше всего использовать собственный выпадающий список (плагин или собственную реализацию).

Конечная цель - наложить div или ul и отобразить параметры где пользователь может нажать; это затем изменит параметр на выберите поле. Возможно ли это сделать?

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

Answer 2

Процедура, которую вы описали, является обходным путем для придания HTML-формам большей красоты и является почти обычной.Например, многие дизайнеры создают свои собственные флажки и подключают их с помощью JavaScript к базовым элементам <input type='checkbox' в своей форме.Тем не менее, ваш способ сделать это немного ненормально.

Не пытайтесь наложить ваш элемент select на div или ul.Просто создайте div или ul как то, что видит пользователь, и через JavaScript попытайтесь имитировать выпадающий список.Всякий раз, когда пользователь нажимает на любой элемент в вашем списке, получает значение и соответственно устанавливает значение вашего выбора.

Другими словами, вместо того, чтобы пытаться подключить div или ul к событиям выбора, сопоставьте select с событиями щелчка div илиул.