Question

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

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

在上面，如果我在下拉列表外单击，则没有任何反应。函数触发的唯一时间是我更改选择下拉列表的值。

如何完成上述操作，以便当用户点击选择下拉列表之外的文档上的任何位置时，它会触发此功能？

Answer 1

我不认为这是可能的。正如another answer中所指出的，似乎活跃的<select>禁止接受其他输入。

See my updated fiddle。请注意，当您单击背景时，当选择未展开时，您会收到提醒test。当展开并单击关闭时，警报不会触发。这似乎是浏览器的默认行为。激活选择时，它似乎忽略所有其他输入（包括鼠标移动）。

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

Example

$(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); 
}

选择下拉列表的OnBlur效果

1 个答案:

Example