Проверьте, отображается ли опция выбора параметров
У меня есть следующий код HTML:
<select>
<option selected>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
Ответы
Ответ 1
Вы можете прослушивать нажатие, размытие и нажатие клавиши. Я просто переключаю переменную open
на true or false
на каждое событие.
// if menu is open then true, if closed then false
// we start with false
var open = false;
// just a function to print out message
function isOpen(){
if(open)
return "menu is open";
else
return "menu is closed";
}
// on each click toggle the "open" variable
$("#myselect").on("click", function() {
open = !open;
console.log(isOpen());
});
// on each blur toggle the "open" variable
// fire only if menu is already in "open" state
$("#myselect").on("blur", function() {
if(open){
open = !open;
console.log(isOpen());
}
});
// on ESC key toggle the "open" variable only if menu is in "open" state
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if(open){
open = !open;
console.log(isOpen());
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option selected>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
Ответ 2
Вы можете использовать событие change
в случае not displayed
и focus
событие для displayed
$("#myselect").on({
"change": function() {
$(this).blur();
},
'focus': function() {
console.log("displayed");
},
"blur": function() {
console.log("not displayed");
},
"keyup": function(e) {
if (e.keyCode == 27)
console.log("displayed");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option selected>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
Ответ 3
После прочтения я понял, что теги Option не являются "обычными" элементами DOM. Тогда управлять им не так просто (вместо этого вы проверяете щелчок, размытие и комбинирование других методов, как мы начали пытаться).
Теперь я решил, что вы наконец нашли решение в сочетании с первой идеей, которую мы имели, тогда я просто объясню другие возможные решения, которые у вас есть, и все, что я узнал о выборе:
-
Если вы не добавляете атрибут размера к выбору, вы не сможете обнаружить нажатие клавиши во время его открытия.
-
Если вы добавите атрибут размера больше 1 в select, он обнаружит нажатие клавиши, но потеряет его формат и появится список.
-
Если вы попытаетесь использовать смещение и подобное, чтобы проверить, открыт ли выбор, также не работает, поскольку объекты-опции не имеют смещения функции... (они не являются обычными объектами DOM)
-
Щелчок/фокус также не будет достаточным, так как фокус остается включенным после нажатия "ESC".
Затем, после всех рассмотренных вещей, я думаю, что это невозможно сделать с чистым HTML-способом, не делая много элементов управления щелчком/размытием, как было сказано ранее.
В любом случае, чтобы уточнить, есть много jquery librarys, которые помогут вам смоделировать выпадающее меню select/option и управлять if он открыт.
Я надеюсь, что этот ответ решит ваш вопрос. Проверьте этот функциональный скрипт, который я вам подготовил, чтобы показать путь к jquery:
$('#jq-dropdown-1').on('show', function(event, dropdownData) {
console.log("SHOWN");
}).on('hide', function(event, dropdownData) {
console.log("HIDDEN");
});
<link rel="stylesheet" href="https://rawgit.com/claviska/jquery-dropdown/master/jquery.dropdown.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/claviska/jquery-dropdown/master/jquery.dropdown.min.js"></script>
<a href="#" data-jq-dropdown="#jq-dropdown-1">dropdown</a>
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
<ul class="jq-dropdown-menu">
<li><a href="#1">Item 1</a>
</li>
<li><a href="#2">Item 2</a>
</li>
<li><a href="#3">Item 3</a>
</li>
<li class="jq-dropdown-divider"></li>
<li><a href="#4">Item 4</a>
</li>
<li><a href="#5">Item 5</a>
</li>
<li><a href="#5">Item 6</a>
</li>
</ul>
</div>
<button id="clickme">click me</button>
Ответ 4
Im предлагает вам использовать новый jquery selectmenu, который предоставляет событие selectmenu open
$("#myselect").selectmenu({
open: function(event, ui) {
alert("opened");
}
});
label {
display: block;
}
select {
width: 200px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<select id="myselect">
<option selected>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
Ответ 5
Решение:
select
- это вход, он имеет состояние фокусировки, поэтому, когда он сфокусирован, будет отображаться список (параметры), когда он не будет списком параметров. Итак:
$("#myselect").on("click", function() {
if ($("#mySelect").is(":focus")) {
console.log("displayed");
} else {
console.log("not displayed");
}
});
Надеюсь, что это поможет.