如何在td里面的div里面放一个select下拉框实现

<table  class='table_big'  cellspacing="0" cellpadding="0" border="0">
 <tr id='B2_Q11' >

             
<td class="data"  >Q1</td>
              <td class="data" ><div id="B2_C13" class="test_box
selectd" contenteditable="true"></div></td>
              <td class="data" ><div id="B2_D13" class="test_box" contenteditable="true"></div></td>

<script>
$(".selectd").on('focus', function (e) {
var optionTxts = ['','足够的市场机会','持续增强组织能力','增强每日管理能力','赢客工具的上线和使用'];
var value = $(this).text();

var htmlText = "<select id='sel_BizPlan' style='width:100%; '>";
for(var i=0;i<optionTxts.length;i++){
//for(var option of optionTxts){
var optionTex = optionTxts[i];

if(optionTex== value){

htmlText = htmlText+"<option selected = 'true'>"+optionTex+"</option>";

/*if(value == optionTex){
htmlText = htmlText+"<option selected = 'true'>"+optionTex+"</option>";
*/
}else{
htmlText = htmlText+"<option>"+optionTex+"</option>";
}
};
htmlText = htmlText+"</select>";
$(this).parent().append(htmlText);
$(this).hide();
$("#sel_BizPlan").focus();
});