Проверьте, отображается ли опция выбора параметров

У меня есть следующий код 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");
    } 
});

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