title: can you use jquery to dynamically change the type of an input field?
body: <p><strong>Background Information</strong></p>
  
  <p>I'm trying to refactor some php / html code.  I have a table full of various rows... each row has a few columns, including an image icon. </p>
  
  <p>I'd like to write some logic so that when someone clicks on this image, the system does two things: </p>
  
  <ol>
  <li>creates a drop down list in place of the  tag.</li>
  <li>gets the values / list for this drop down from an existing drop down on the page.  (Called "location_id").</li>
  </ol>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>  &lt;tr&gt;
      &lt;td id="21581"&gt;
         &lt;img src="?module=chrome&amp;amp;uri=pix/tango-user-trash-16x16-gray.png" title="1rack" height="16" width="16" border="0"&gt;
       &lt;/td&gt;
       &lt;td id="location_name"&gt;location1&lt;/td&gt; 
       &lt;td&gt;Location1-ABB-01&lt;/td&gt;
       &lt;td&gt;&lt;input tabindex="1" name="submit" class="edit" src="?module=chrome&amp;amp;uri=pix/pencil-icon.png" id="21581" title="Edit row" type="image" border="0"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="index.php?page=row&amp;amp;row_id=21586"&gt;Row Location1-ABB-01&lt;/a&gt;&lt;/td&gt;
     &lt;/tr&gt;
  </code></pre>
  
  <p>so specifically I'd like to replace the  that has "location1" as the value with a  drop down that exists else where on the page.  and since the  will have "location1" in the list, I want "located1" to be the selected value.</p>
  
  <p>This is the javascript code I have so far: </p>
  
  <p><strong>Javascript Code</strong></p>
  
  <pre><code>$(document).ready(function () {
          $(".edit").click(function(){
                  alert(this.id);
                  $( "#location_id" ).clone().appendTo("#"+this.id );
          });
  
  });
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>This code works in that I end up with a new drop down list in the row, but I'm not sure how to select/highlight the item in the drop down list with the value "21581".  Or, alternatively I could match the  item using the "location_name" value as well.<br>
  The challenge I have right now is uniquely identifying the right  box to loop through because the new  that's created from the clone() command has the same name as the existing one.  </p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>Here's what the code looks like right now 
  (btw.  i can't change my jquery version because this is someone else's code... so I can't use the "on" directive.)</p>
  
  <pre><code>$(document).ready(function () {
          $(".edit").click(function(e){
                  alert(this.id);
                  var menu = $( "#location_id" ).clone();
                  $(e.currentTarget).replaceWith(menu);
                  menu.find('option').each(function(i, opt) {
                  // when the value is found, set the 'selected' attribute
                          if($(opt).attr('value') == this.id) $(opt).attr('selected', 'selected');
                   });
          });
  
  });
  </code></pre>
  
  <p>The first alert statement appears correctly - it shows the value in the first td (eg. 21581). The drop down appears and replaces the image... but I need it to replace the location_name value instead.</p>