Javascript/PHP/Codeigniter中的悬停事件

提供一些背景信息：我有一个php函数“showSystems”，它从CMDB中提取数据，并在Codeigniter表单助手“form_Dropdown”生成的下拉列表中显示。因此，下拉列表包含所有服务器的名称，当单击其中一个时，其他一些不相关的函数会显示有关该特定系统的各种信息

我现在想要实现的是，当鼠标悬停在下拉列表中列出的系统上时，该系统的描述将显示在列表下的标签中。当不悬停任何内容时，标签将隐藏

比如：

Dropdown:
Server1
Server2  <-- hover over this
Server3

Label --> shows Description of Server2

下拉列表：
服务器1
Server2显示Server2的描述

如何使用php/javascript处理生成的下拉列表中的mosehover事件

编辑：所以我提供了更多的背景信息，因为这似乎与我的技术设置有关

使用接收到的数据生成下拉列表的函数写入Codeigniter模型中：

 <?php
 echo '<select class="minipanel" id="selectminipanel"  size="25" style="width: 100%" onchange="window.location = \''.site_url(CONTROLLER.'/showItem').'/\' + this.value;">';
         foreach($tmp as $key => $value):
                if ($active == $key){
                    echo '<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" value="'.$key.'" server-description="'.$value[1].'" selected>'.$value[0].'</option>';
                } else {
                    echo '<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" value="'.$key.'" server-description="'.$value[1].'">'.$value[0].'</option>';
                }
         endforeach;
 echo '</select>';
 ?>

模块通过视图（加载模型）加载到模板中。该标签在codeigniter调用之后定义：

 <?php $this->load->view("V".$this->name."/vMinipanel"); ?>
 <label id="description"></label>

脚本也会写入此模板的标题部分：

 <script language="JavaScript">
 function displayDescription($ele) {
          var server_data = ele.server-description;
          document.getElementById('description').innerHTML = server_data;
 }
 function hideLabel() {
          document.getElementById('description').innerHTML ='';
 }
 </script>

函数displayDescription（$ele）{
var server_data=ele.server-description；
document.getElementById（'description'）。innerHTML=server\u数据；
}
函数hideLabel（）{
document.getElementById（'description'）。innerHTML=''；
}

---

那么，为什么不调用函数displayDescription和hideLabel呢？

如果您使用的是bootstrap

<a href="#" data-toggle="tooltip" title="server 1 description">server 1</a>
<a href="#" data-toggle="tooltip" title="server 2 description">server 2</a>
<a href="#" data-toggle="tooltip" title="server 3 description">server 3</a>

---

只要这些代码行就可以正常工作。

鼠标悬停时触发事件，并使用元素的数据描述显示详细信息：

<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" data-server-description="your_description" id='1'>
Server1 
</option>

<script>
function displayDescription(ele) 
{
 // You can use the data-server-description attribute to catch the description
  var server_data = ele.data-server-description;

  // you can also use the ID to fetch the description if not embadded in as an html attribute
  var server_id = ele.id;

  document.getElementById('your_label_id').innerHTML = server_data;   
}

function hideLabel()
{
  document.getElementById('your_label_id').innerHTML =''; 
}
</script>

服务器1
功能显示说明（ele）
{
//可以使用“数据服务器描述”属性捕获描述
var server_data=ele.data-server-description；
//如果没有作为html属性保存，您也可以使用ID获取描述
var server_id=ele.id；
document.getElementById（“您的标签id”）.innerHTML=服务器数据；
}
函数hideLabel（）
{
document.getElementById（'your_label_id'）。innerHTML=''；
}

请检查并运行以下代码：

遗憾的是，我没有使用引导。然后你应该创建一个动态元素，然后在hover@fuerro上显示它。我的问题是，我不能让hover事件工作。我想使用onmouseover&onmouseout并像anaport建议的那样调用jscript函数，但似乎该函数没有被调用。我怎么做动态元素的事情呢？如果你可以包含jquery，那么它可以很容易地在下拉字段中使用title=“”标记。那么如果我能够包含jquery，我该怎么做呢？我只是没有这方面的经验。我只需要检查一下是否可以为每个选项添加参数，然后我会尝试你的建议。谢谢所以我能够设置所有内容，现在我在选项标签和服务器描述中获得了2个事件。我需要如何配置标签<代码>这就足够了吗？给标签一个ID，这就是您捕获它并更改其内部html的方式<代码>我完全按照您的描述制作了它，但是onmouseover似乎没有调用jscript函数。我的每个选项现在看起来都是这样的：

server112073

，其中Value是每个数据库记录的唯一ID。有趣的是，这是多么容易。谢谢。是的，很简单，所以我已经在上面发表了评论。。。谢谢你的接受和+1:）@Fuerro