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); }); 

     }); 

希望帮助！