Home/ Questions/Q 8071195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T13:38:16+00:00

When clicking Click Me, the text turns into a select menu. When changing the

  • 0

When clicking “Click Me”, the text turns into a select menu. When changing the select menu, it updates the text.

Last thing I need to do is if the select menu loses focus (i.e. something other than the select menu is clicked), revert back to the original text. How do I do this?

Thank you

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use $("td.edit select").focus(); to focus on the select box when it is shown, and then use the blur event:

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