1

「クリックして」をクリックすると、テキストが選択メニューに変わります。選択メニューを変更すると、テキストが更新されます。

最後に行う必要があるのは、選択メニューがフォーカスを失った場合（つまり、選択メニュー以外のものがクリックされた場合）、元のテキストに戻ることです。どうすればよいですか？

ありがとうございました

http://jsfiddle.net/tBRf8/2/

<!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>
4

1 に答える 1

2

表示されているときに選択ボックスにフォーカスするために使用$("td.edit select").focus();してから、blur イベントを使用します。

$('#select-clone').blur(function () {
  $(this).hide();
});
于 2012-06-11T13:19:52.607 に答える