On click, show select, on select change show text
<p>I'm trying to make something where you can dynamically insert an HTML block, and if you click on certain words a select box appears where you can select the item that you would like to replace the word. Once the item has been selected from the select list, the text value appears where the word used to be.</p>

<p>I'm just having trouble with the last part - ie. selecting the item and getting the text of that item to replace the select box.</p>

<pre><code>var these_labels = "&lt;select&gt;&lt;option&gt;Replacement A&lt;/option&gt;&lt;option&gt;Replacemnet B&lt;/option&gt;&lt;option&gt;Replacement C&lt;/option&gt;&lt;/select&gt;";
$(".add").live('click', function(event){
    event.preventDefault();
    event.stopPropagation();

    $("#area").append("&lt;div class='entry'&gt;IF: &lt;span class='label'&gt;ANY&lt;/span&gt;&lt;/div&gt;");
});

$(".label").live('click', function(event){
    event.preventDefault();
    event.stopPropagation();

    $(this).replaceWith(these_labels);
    $(this).change(function(event){
        event.preventDefault();
        event.stopPropagation();

        $(this).replaceWith($(this).find(":selected").text());
    });
});
</code></pre>
