JQuery/Javascript onclick event to html open select tag

Question

У меня есть диапазон, который я позиционировал поверх тега select, когда вы нажимаете на тег select, который открывается меню, чтобы выбрать значение, но когда вы нажимаете на диапазон позиционируется поверх метки выбора, ничего не происходит. Есть ли способ jquery для использования по клику, который откроет меню выбора тегов?

<select id="support_support_type" name="support[support_type]"> 
    <option value="Contact">Contact</option> 
    <option value="Feedback">Feedback</option> 
    <option value="Help">Help</option> 
</select> 
<span class="drop down-arrow"></span> 

Answer 1

ли пролет position ред absolute над полем выбора? Если это так, гораздо удобнее использовать для этого CSS-указатели CSS. Учитывая, что it's compatible with almost all browsers, я бы использовал его для производства. Правила CSS обычно также предпочтительнее хакера javascript.

Добавьте это в свой файл CSS, и вам будет хорошо.

.drop.down-arrow{ 
    pointer-events: none; 
} 

Что это делает в основном позволяет курсор щелкнуть через него <select> под ним. Надеюсь, я был полезен!

Answer 2

Я предполагаю, что вы хотите, это функциональность, которую предлагают этикетки. Таким образом, вам лучше использовать <label> вместо привязки.

<label for="support_support_type">Select</label> 
<select id="support_support_type" name="support[support_type]"> 
    <option value="Contact">Contact</option> 
    <option value="Feedback">Feedback</option> 
    <option value="Help">Help</option> 
</select> 

Теперь у Вас есть то, что делает <span>, то есть отображать текст, но при нажатии на нее, то <select> будет автоматически сфокусироваться.

Answer 3

Вы можете использовать .attr() и настроить его, чтобы показать/скрыть доступные варианты.

Рабочий фрагмент кода:

var toggle = true; 
 
$("span.down-arrow").on("click", function(){ 
 
    if(toggle){ 
 
    $("select#support_support_type").attr('size', 3); // show all 3 options 
 
    toggle = false; 
 
    } 
 
    else{ 
 
    $("select#support_support_type").attr('size', 1); // show only the selected option 
 
    toggle = true; 
 
    } 
 
}); 
 

 
$('select#support_support_type').on("change", function() { 
 
    $(this).attr('size', 1); 
 
    toggle = true; 
 
});

span{ 
 
    vertical-align: top; 
 
} 
 

 
select{ 
 
    overflow-y: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="support_support_type" name="support[support_type]"> 
 
    <option value="Contact">Contact</option> 
 
    <option value="Feedback">Feedback</option> 
 
    <option value="Help">Help</option> 
 
</select> 
 

 
<span class="drop down-arrow">span</span>

Readup:

• .attr() | jQuery

Answer 4

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

$('span').click(function() { 
    var e = document.createEvent('MouseEvents'); 
    e.initMouseEvent('mousedown'); 
    $('select')[0].dispatchEvent(e); 
}); 

WORKING DEMO