选择菜单失去焦点

点击“点击我”时，文字变成选择菜单。更改选择菜单时，它会更新文本。选择菜单失去焦点

我需要做的最后一件事就是如果选择菜单失去焦点（即点击了选择菜单以外的其他东西），还原为原始文本。我该怎么做呢？

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<title>Select Clones</title> 
<style type="text/css"> 
.hide {display:none;} 
</style> 

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('#add').click(function(){ 
     $('#my-table tbody').append($("#row-clone").clone(true).removeAttr('id')); 
    }) 

    $("#my-table td.edit") 
    .on("click", "span", function(){ 
     var $t = $(this), 
     $html = $t.parent(), 
     role = $t.text(); 
     $html.html($("#select-clone").clone(true).removeAttr('id').removeAttr('class').focus().blur(function() {alert('Handler for .blur() called.')})); 
     //$html.html($("#select-clone").clone(true).removeAttr('id').removeAttr('class')); 
    }) 
    .on("change", "select", function() { 
     var $t = $(this), 
     val = $('<span>').html($t.find(':selected').html()); 
     $t.parent().html(val); 
    }); 

    //$('#select-clone').blur(function() {alert('Handler for .blur() called.')}); 
    //$('#select-clone').focusout(function() {alert('Handler for .focusout() called.')}); 

}); 

</script> 

</head> 
<body> 

<table id="my-table"> 
    <thead class="hide"> 
    <tr id="row-clone"><td></td><td class="edit"><span>Click Me</span></td></tr> 
    </thead> 
    <tbody> 
    <tr><td></td><td class="edit"><span>Click Me</span></td></tr> 
    <tr><td></td><td class="edit"><span>Click Me</span></td></tr> 
    <tr><td></td><td class="edit"><span>Click Me</span></td></tr> 
    </tbody> 
</table> 
<br /> 
<select id="select-clone" class="hide"> 
<option value="1">One</option> 
<option value="2">Two</option> 
<option value="3">Three</option> 
</select> 

<button id="add">Add</button> 

</body> 
</html>

来源

2012-06-11 user1032531

使用$("td.edit select").focus();专注于选择框时，将显示它，然后使用模糊事件：

$('#select-clone').blur(function() { 
    $(this).hide(); 
});

来源

2012-06-11 13:19:52 woz

这几乎工程。不幸的是，用户需要先打开选择菜单。也许一种使用jQuery来应用焦点的方法？ – user1032531

它以什么方式不起作用？用户应该能够在失去焦点之前选择一些东西。 – woz

您点击“点击我”，出现选择菜单。然后立即点击其他事件，事件不会触发。您必须先点击选择菜单，然后点击关闭它并触发。 – user1032531

选择菜单失去焦点

回答

相关问题