как получить опцию множественного выбора объекта, который будет выделен, когда мышь будет перемещаться над этой опцией

Question

как установить индекс объекта множественного выбора, который будет выбран, когда мышь перемещается над опцией этого индекса.например, в следующем коде html, когда мышь наведет курсор на option 1, он будет выбран.Я хочу сделать все это в javascript без редактирования кода html.

<select size="6" multiple="multiple">
                    <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>

Answer 1

Если вы хотите присвоить элементу выбора идентификатор «mySelect»

<select size="6" multiple="multiple" id ="mySelect">
                  ...
</select>

При использовании обычного JavaScript это будет реализовано так:

<script type = "text/javascript">

var element = document.getElementById("mySelect");
var options = element.options;
for(var i = 0; i<options.length; i++){
    options.item(i).onmouseover = function(e){
        e.target.parentNode.selectedIndex = e.target.value-1;
    };
}

</script>

Answer 2

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

1. Получите объект [select], используя его идентификатор.
2. Затем получите первый объект [option] (по какой-то причине не все дочерние объекты объекта select являются параметрами ... я думаю,некоторые являются текстовыми узлами, потому что мы используем пробел для отступа в HTML, поэтому я использую второй дочерний элемент (options [1]) для получения ссылки на первый элемент [option].
3. Созданиефиктивный элемент div, который будет использоваться в качестве скрытого холста.
4. Установите для div скрытое абсолютное положение и видимость, чтобы оно не отображалось и не влияло на содержимое.
5. УстановитеВысота div до размера, указанного в стиле font-size тега [option] (это хитрость, я пытаюсь вычислить высоту элемента [option] по его font-size. Иногда это значение указывается в points (например, 10pt), поэтому я создаю div с точно таким же значением для его высоты и прошу браузер вернуть мне высоту в пикселях.Как только у меня будет высота элемента [option], остальное будет тривиально.
6. вычтите самую верхнюю позицию выделения из координаты y мыши и разделите на высоту элемента [option].Это даст нам элемент, на котором в данный момент находится мышь (верхняя позиция мыши - выбор верхней позиции преобразуется из координат экрана в координаты блока выбора, а деление на высоту элемента [option] дает нам текущий [option].
7. Возьмите номер текущего [option] и используйте его в качестве значения для selectedIndex.

Код:

    function ieElementFromPoint( e )
    {
        var select  = document.getElementById( "mySelect" );
        var options = select.childNodes;
        var d = document.createElement( "DIV" );
        d.style.position = "absolute";
        d.style.visibility = "hidden";
        d.style.height = options[ 1 ].currentStyle.fontSize;
        document.body.appendChild( d );
        select.selectedIndex = ( Math.round( ( ( e.clientY + document.body.scrollTop ) - select.offsetTop ) / d.offsetHeight ) );
     }

Для остальных браузеровобработка намного проще:

var old = null;

function select( e )
{
    if ( document.all )
    {
        ieElementFromPoint( e );
    }
    else
    {
        var option = e.target;

        if ( option.tagName == "OPTION" )
        {
            if ( old != null )
            {
                old.selected = false;
            }

            old = option;
            option.selected = true;
        }
    }
}

Не забудьте дать [select] правильный идентификатор (id = "mySelect") и добавить onmousemove = "select (event)" в [select] какхорошо. Это сработало для меня: Chrome, FireFox (3.6), Explorer 8, Explorer 6 (эмулированный), Opera & Safari.

Не забудьте удалить тестовый DIV из документа, когда мы закончим с нимв противном случае в DOM будет куча неиспользуемых DIV, поэтому в конце ieElementFromPoint () добавьте:

document.body.removeChild (d);

Надеюсь, эта помощь.

Answer 3

Вы можете использовать jQuery:

$("option").mouseover(function(){
    $(this).prop("selected",true);
});