Javascript/PHP/Codeigniterのホバーイベント

Question

バックグラウンド情報を取得するには：私はCMDBからデータを抽出し、Codeigniterフォームヘルパー "form_dropdown"によって生成されたドロップダウンに表示するphp関数 "showSystems"を持っています。したがって、ドロップダウンにはすべてのサーバーの名前が含まれています。クリックすると、他の無関係な機能のいくつかは、その特定のシステムに関するさまざまな種類の情報を示します。

ここで達成したいのは、ドロップダウンリストに表示されているシステムにマウスを移動すると、そのシステムの説明がリストの下のラベルに表示されることです。何も浮かされていないときは、ラベルは隠されています。

私はPHP/JavaScriptを使用して、この生成されたドロップダウンにmosehover-イベントを処理するにはどうすればよい

Dropdown: 
Server1 
Server2 <-- hover over this 
Server3 

Label --> shows Description of Server2 

：よう

何か？

編集：テクニカルセットアップと関係があるように、背景情報をいくつか追加します。受信されたデータをドロップダウンを生成

機能は、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>'; 
?> 

MODULは、（モデルをロードする）ビューを介してテンプレートにロードされます。ラベルは右CodeIgniterのコールの後に定義されています。

<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あるとhideLabelは呼ばれない：

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

スクリプトは、このテンプレートのheadセクションで書かれていますか？

Answer 1

チェックして、コードの下に実行してください：

<a href="#" title="server 1 description">server 1</a><br> 
 
<a href="#" title="server 2 description">server 2</a><br> 
 
<a href="#" title="server 3 description">server 3</a>

Answer 2

ブートストラップ

<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> 

を使用している場合は、単にコードのこれらの行はあなたのために正常に動作します。

Answer 3

トリガーの上にマウスのイベント、および詳細を表示する要素のデータ記述を使用します。

<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>