title: How can I implement renaming an option in an HTML select?
body: <p><br />
  I want the user to be able to select an option, and to be able to rename this when clicking a "rename" button.
  <br /><br />
  I'm attempting this by nesting an <code>input type = "text"</code> inside the selected <code>option</code>. However, the <code>onblur</code> event in the <code>input</code> is not working...
  <br /><br />
  It seems that <code>select</code> does not allow nesting HTML elements inside <code>option</code>, but it's functionality is ideal... With what structure might I implement something like this, an unordered-list?
  <br /><br /><hr />
  Here is the HTML:</p>
  
  <pre><code>&lt;select id = "asdf" size = "2"&gt;
      &lt;option&gt;asdf&lt;/option&gt;
      &lt;option&gt;qwerty&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type = "button" value = "rename" onclick = "rename();" /&gt;
  </code></pre>
  
  <p><br />
  ...and here is the javascript/jQuery:</p>
  
  <pre><code>function rename() {
      if ($("#asdf").length &gt; 0) {
          var selectedText = $("#asdf").find(":selected").text();
          var selectedIndex = $("#asdf").find(":selected").index();
          var options = document.getElementById("asdf").options;
  
          options[selectedIndex].innerHTML =
             "&lt;input type = 'text' id = 'field' onblur = 'setField(this.value);'" +
             "value = '" + selectedText + "' /&gt;";
  
          function setField(newName) {
              options[selectedIndex].innerHTML = newName;
          }
      }
  }
  </code></pre>