On mouseover / hover replace text with select tag

Question

How can I replace a text (in a div tag, for example) with a select tag (dropdown) when hovering or onmouseover the text?

The way I tried with using innerHTML creates a select element, but it does not expand when clicked:

<div id="status" onmouseover="document.getElementById('status')
.innerHTML='<select><option>1</option><option>1</option></select>';">
This is a test
</div>

Answer 1

Try jQuery .hover and toggleClass to hide/show

$(".name, .name_choice").hover(function(){
  $(".name, .name_choice").toggleClass("hide");
});
$(".name_choice").change(function(){
  $(".name").html($(this).val());
});

.hide{
  display : none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="name">Select Name</div>
  <div>
    <select class="name_choice hide">
      <option>Niklesh</option>
      <option>Atul</option>
      <option>Sachin</option>
    </select>
  </div>
</div>