动态生成行首行select2与原生select兼容问题求助

我现在碰到个头疼的问题：我在动态生成的行里设置了两个选择字段，一个是Select2下拉框，一个是原生select输入框。目前子行里的两个选择框都能正常选择选项，但父行里的Select2生效后，原生select就没法选选项了。

我写了个脚本，用来实现子行里的Select2字段在鼠标悬停时自动展开选项，代码如下：

$(document).on('mouseenter', '.item1', function() { 
  var select2_open; 
  $(this).select2().select2('open'); 
});

父行的HTML代码 #

<div class="span2"> 
  <label style="font-size:13px;">Labour Code</label> 
  <select type="text" id="labour_code locationCodesParent" class="item1" name="lc[]" onChange="UpdateInfo(<?php echo $k=1;?>);" style="width:100px;" /> 
  <option value=""></option> 
  <?php foreach($labour as $row) {?> 
  <option value ="<?php echo $row['labour_code']; ?>"><?php echo $row['labour_code']; ?></option> 
  <?php } ?> 
  </select> 
</div>

动态生成子行的脚本代码 #

var html="<div class='span2 pdfs locationCodesParent' style='margin-left:0px;'><select class='labour_code2 item1' name='lc[]' style='width:100px;' onChange='UpdateInfo1(this.value,"+count+");'><option value=''></option> <?php foreach($labour as $row) { ?> <option value='<?php echo $row['labour_code']; ?>'><?php echo $row['labour_code']; ?></option> <?php } ?></select></div>"; 
$("#rezult").append(html);

另外我已经分别在页面头部和页脚引入了Select2.js和select2.min.css文件。

内容的提问来源于stack exchange，提问作者julie