マウスオーバー/ホバーで選択タグでテキストを置き換えます

Question

テキストをホバリングまたはオンマウスオーバーするときに、選択タグ（ドロップダウン）でテキストを置き換えるにはどうすればよいですか？

私はinnerHTMLのは、select要素を作成しますが、クリックされたとき、それは展開しません使用してみまし方法：

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

Answer 1

示し/

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

を非表示にするjQueryの .hoverと toggleClassをお試しください