你可以试着听一下点击，模糊和按键事件。我只是在每个事件上切换一个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>

not displayed时可以使用change事件，displayed时可以使用focus事件

$("#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>

我建议您使用新的jquery selectmenu，它提供了selectmenu打开事件

$("#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>

参考：www.example.comhttp://api.jqueryui.com/selectmenu/#event-open

读完之后，我意识到Option标记并不是"常见的" DOM元素。那么，控制它就不那么容易了（相反，您正在检查Click、Blur和组合其他方法，就像我们之前开始尝试的那样）。
现在，我已经设法你终于找到了解决方案的混合第一个想法，我们有，然后，我会解释其他可能的解决方案，你有和所有的事情，我已经学会了选择：

• 如果你不给select添加一个size属性，你将不能在它打开的时候检测到按键。
• 如果你在select中添加一个大于1的size属性，它会检测到按键，但是会丢失它的格式，并出现一个列表。
• 如果你尝试使用offset或类似的方法来检查select是否打开，也是无效的，因为选项对象没有offset函数...（它们不是通常的DOM对象）
• 单击/焦点也不够，因为"ESC"单击后焦点仍处于选择状态。

然后，在回顾了所有这些东西之后，我认为不像之前回答的那样做大量的点击/模糊控件就不可能用纯HTML的方式制作它。
无论如何，澄清一下，有很多jquery librarys可以帮助您模拟选择/选项下拉菜单，并控制它是否打开。
我希望这个答案能解决你的问题。检查一下我为你准备的这个函数，它可以显示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>

这些是我读过的理解它的文档：

• jQuery keypress/keyup/etc events not fired when select box is expanded
• How to detect escape key press with JavaScript or jQuery?
• jQuery Event Keypress: Enter key
• Keypress event on chosen single select

如果你想要一个更简单的尝试，下面的方法可能值得一试。简单地说：专注于元素。

var $mselect = window.jQuery("select");
  $mselect.focus(function () {
    console.log('select values should be visible');
  });

我用这个密码
cnt =文档.getElementById（'your_select'）.子元素计数;
if（cnt == 0）{your_select元素中没有选项元素。

ES6的一个实际例子是在select打开时添加一个类，在关闭时删除它。请注意，在早期版本的Chrome中，当你按spacebar和enter时，这些选项也会出现。但enter在其他浏览器中的行为与Chrome大不相同。

const element = document.getElementById('docType');
setupSelect(element);

function setupSelect(element) {
    element.selectedIndex = -1;
    
    let clickedByMouse = false;

    element.onclick = () => {
        if (!element.value) {
            if (!clickedByMouse) {
                toogleSelectOptions(element);
            } else {
                clickedByMouse = false;
            }
        }
    }

    element.onmousedown = () => {
        if (!element.value) {
            clickedByMouse = true;
            toogleSelectOptions(element);
        }
    }

    element.onblur = () => {
        if (!element.value) {
            if (element.classList.contains('is-open')) {
                element.classList.remove('is-open');
            }
        }
    }

    element.onchange = () => {
        if (element.value) {
            if (!element.classList.contains('is-open')) {
                element.classList.add('is-open');
            }
        }
    }

    element.onkeydown = (e) => {
        if (e.keyCode == 32) {
            if (!element.value) {
                toogleSelectOptions(element);
            }
        } else if (e.keyCode == 13) {//Enter does not work in Firefox the same way as Chrome
            e.preventDefault();
        }
    }

    element.onkeyup = (e) => {
        if (e.keyCode == 27) {
            if (!element.value) {
                if (element.classList.contains('is-open')) {
                    element.classList.remove('is-open');
                }
            }
        }
    }
}

function toogleSelectOptions(element) {
    if (element.classList.contains('is-open')) {
        element.classList.remove('is-open');
    } else {
        element.classList.add('is-open');
    }
}

select.is-open{
  background-color:red;
}

<div class="floating">
  <select name="docType" id="docType">
      <option value="1">ID</option>
      <option value="2">Passport</option>
      <option value="3">Drivers license</option>
  </select>
  <label for="docType">Document Type</label>
</div>

您可以添加更多函数，将其简化为可读性更强的代码，并分别处理每个函数。
如果我得到+10票，我会发布一个内联浮动标签的完整实现，像这样：

解决方案：
select是一个输入，它有一个焦点状态，所以当它有焦点时，列表（选项）将显示，当它没有焦点时，选项列表将消失。

$("#myselect").on("click", function() {
    if ($("#mySelect").is(":focus")) {
        console.log("displayed");
    } else {
        console.log("not displayed");
    } 
});

希望能有所帮助。

当jquery是1.6+时，简单检查怎么样

if ($(".selector").is(":focus")){
      // do stuff
  }

或

$(".selector").on('focus', function() {
    // do stuff
});

它可以做到这一点。