Sur mouseover/hover, remplacez le texte par la balise select

Question

Comment puis-je remplacer un texte (dans une balise div, par exemple) par une balise de sélection (menu déroulant) en survolant ou en survolant le texte?

La façon dont j'ai essayé avec l'aide innerHTML crée un élément de sélection, mais il ne se développe pas lorsque vous cliquez dessus:

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

Answer 1

Essayez jQuery .hover et toggleClass cacher/montrer

$(".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>