html，javascript：滾動列表框項目 - 並顯示每個項目的提示

Question

所以我需要做的是：當我從列表框中選擇一個項目時，我需要能夠動態顯示該項目的其他信息在一個單獨的盒子裏。即比方說，我滾動瀏覽汽車列表，對於我選擇的每輛汽車，我都會顯示價格，顏色，里程等等。這個想法是在外觀和感覺上類似於彈出旁邊的提示元素在使用時懸停。換句話說，理想情況下，我會看到一個小盒子，它可以在所有需要的信息旁邊奇蹟般地彈出。 關於如何實現這個的任何建議？

更新： 澄清我在找什麼。我結束了通過響應的變化（）事件，並手動更新我以前爲此particula目的定義html元素，就像下面的答案中的一個執行它表明：

$('#available-elements').change(function() { 
    var id = $(this).val(); 
    var element = find_element(id);//retrieve complete element info 
    $('#the_prompt').show(); 
    $('#prompt_name').find('td').text(element.title); 
    $('#prompt_datatyp').find('td').text(element.dataType);  
    $('#prompt_groupCode').find('td').text(element.groupCode); 
}); 

提示元素被定義爲如下：

<table id="the_prompt" style="border:2px solid grey;"> 
     <tr id='prompt_name'><td class="rate_prompt"></td></tr> 
     <tr id='prompt_datatyp'><td class="rate_prompt"></td></tr> 
     <tr id='prompt_groupCode'><td class="rate_prompt"></td></tr> 
    </table> 

但我希望有一個插件來這個或什麼東西。特別是，我希望我會避免定義一個靜態html元素與其預定義的位置，大小等，並手動更新其內容。相反，我很想看到類似於懸停式幫助的提示，就在點擊列表元素旁邊，箭頭指向點擊元素。 我對jQuery還比較陌生，但我對它的功能和插件留下了深刻的印象，所以上述想法對我來說似乎並不現實。

Answer 1

該溶液顯示了從固定DIV數據屬性所取的描述，並且還調整信息框的位置懸停在列表中的項目時：

jQuery代碼：

$(document).ready(function(){ 
    var lastli = null; 
    var ci = $('#carinfo'); 
    $('.carlist li').hover(function(e){ 
     if (lastli == this) { return; } else {} 
     var top = e.pageY; 
     var left = e.pageX; 
     if (left+100 > $(window).width()){ 
      left -= 100; 
     } 
     ci.html($(this).data('info')); 
     ci.css({'top':top, 'left': left}).show(); 
    },function(e){ 
     var elt = e.toElement || e.relatedTarget; 
     if (elt != this && elt != ci[0]) { 
      ci.hide(); 
      lastli = null; 
     } else { 
      lastli = this; 
     } 
    }); 
    ci.mouseleave(function(e){ 
     var elt = e.toElement || e.relatedTarget; 
     if (elt!=lastli) { 
      ci.hide(); 
      lastli = null; 
     } 
    }); 
}); 

HTML樣本：

<ul class="carlist"> 
    <li data-info="2004 Ford Ranger XLT 2.3L 2WD 125758 miles $5,988"> 
     2004 Ford Ranger 
    </li> 
</ul> 

<div id="carinfo"></div> 

CSS：

ul.carlist { 
    list-style:none; 
    padding:0; 
} 

ul.carlist li { 
    padding: 5px; 
    margin: 5px; 
    background-color:#eef; 
} 

#carinfo { 
    position:absolute; 
    display:none; 
    background-color: white; 
    border:1px solid red; 
} 

DEMO

Answer 2

jQuery的可以處理的HTML標籤的更新在一個彈出式或類似這樣的現有的HTML頁面：

 <div class="highlight"><label>Car Info:</label> 
       <label id="carinfo" for="carinfo"></label> 
     </div> 


<script type="text/javascript"> 

    $(function() { 
     $('#yourlist_id').change(function() { 
      var selectedCar = $(this).val(); 
      //I don't know how you want to get the car info 
      //if you have a function that returns that data it would be 
      //something like this: 
      var carInfo = getCarInfo(selectedCar); 
      $("label[for='carinfo']").text(carInfo); }); 

     }); 

希望幫助！