Javascript “选择”下拉列表的OnBlur效果

我有一个选择下拉列表，如果用户单击该选择下拉列表的“外部”，我希望它消失。这就是我目前拥有的：

$(this).html($("<select/>", {
  id: 'sel',
  change: function() {
    selectdone(this, title_id, status_type);
  },
  blur: function() {
    selectdone(this, title_id, status_type);
  },

在上面的例子中，如果我在下拉列表外单击，则什么也不会发生。函数触发的唯一时间是我更改select下拉列表的值

---

我该如何实现上述功能，以便当用户单击“选择”下拉列表之外的文档上的任何位置时，启动此功能？

我认为这是不可能的。正如中所指出的，active正在禁止接受其他输入

。请注意，当您单击背景时，当select未展开时，您将获得警报测试。当它展开并单击“关闭”时，警报不会触发。这似乎是浏览器的默认行为。当选择被激活时，它似乎忽略了包括鼠标移动在内的所有其他输入

但是，通过将selectedIndex设置为-1，我可以为任何选定元素触发事件。这样，任何有效选项都将导致更改

---

不仅是@elclanrs所说的，而且如果您在下拉列表之外单击，本机操作就是让下拉列表像您所说的那样“消失”。除非你的意思是，你想让它显示：无；或可见性：隐藏；或不透明度：0。你能把这个问题重新表述一下，这样它就能真正解决你的问题吗？@elclars在我的情况下，blur永远不会在这里工作。我试过对它发出警报，但它永远不会开火。上面的函数启动一次，然后完成，我认为它甚至只会在change上初始化，所以每个$都有相同的id？什么你的问题一定是贾里德·法里什所说的。@David542-见我更具描述性的评论；在本例中使用类而不是id是正确的，但正如我所指出的，这可能不是根本的问题。id值在任何给定时间在页面上都应该是唯一的，因此这些值应该是唯一的；分组时，请使用类。

$(function(){    
    var title_id = '', status_type = ''; 
    $('body').html(
        $("<select/>", {
            id: 'sel',
            change: function() {
                selectdone(this, title_id, status_type);
            },
            blur: function() {
                selectdone(this, title_id, status_type);
            }
        })
        .append($('<option />', { 'text':'one'}))
        .append($('<option />', { 'text':'two'}))
    );

    $('#sel').prop('selectedIndex', -1); 
});

function selectdone(element, titleid, statustype){
    $(element).hide().prop('selectedIndex', -1); 
}