jquery - 创建下拉组合框的问题

Question

我正在尝试制作一个下拉组合框（这一次不想尝试 JQuery 插件）。

这是我的 HTML：

<div style="display: table-cell; width:150px; z-index:-1;" id="supdiv">
        <input size='10' id='supinput'>
            <div id='supsel' style='position:absolute;z-index:0;background-color:#b0c4de;'>
            <input type ='checkbox' value='0' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='1' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='2' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='3' id = 'supplier[]' name='supplier'>A</br>

            <input type='button' value='OK' id='supclose'>
            </div>
</div>

当页面加载时，我隐藏了 supsel div。

$('#supsel').hide();

当焦点来到支持输入时，我会显示 div。另外，单击“确定”按钮时，我会隐藏 div。

$('#supinput').focus(function(){
            $('#supsel').show()
    }); 
 $('#supclose').click(function(){
            $('#supsel').hide()
    });

现在我的问题是，如果用户单击页面上的其他任何位置或焦点移动到任何其他输入或区域，我想隐藏 div，但我希望 div 一直显示到用户选择复选框或重点是 SUPSEL。我怎么做？

Answer 1

jsBin 演示

</br>应该<br />
和<input>应该是<input />

而不仅仅是添加：

$('#supdiv').on('click',function(e){
    e.stopPropagation(); // prevent clicks on your parent div to propagate to doc.
});
$(document).on('click focusout',function(event){   // register clicks focusouts
  if(event.target.id !== 'supdiv'){  // if click was not on your parent bropbox
    $('#supsel').hide();             // than do something about it! ;)
  }  
});