html、javascript：滚动列表框项目，并显示每个项目的提示

所以我需要做的是：当我从列表框中选择一个项目时，我需要能够在一个单独的框中动态显示该项目的其他信息。比如说，我正在滚动一个汽车列表，对于我选择的每一辆汽车，我都会显示价格、颜色、里程等。这样做的目的是让它在外观和感觉上与使用悬停时元素旁边弹出的提示相似。换句话说，理想情况下，我会看到一个小盒子，它神奇地出现在物品旁边，里面有所有需要的信息。 有没有关于如何实施的建议

更新： 澄清我在找什么。我最终通过响应更改事件并手动更新我之前为此特定目的定义的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);
});

prompt元素的定义如下：

    <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还比较陌生，但我对它的功能和插件印象深刻，因此上面的想法对我来说并不那么不切实际。

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

      });

---

希望有帮助

此解决方案显示从fixed div中的数据属性获取的描述，并在将鼠标悬停在列表项上时调整infobox的位置：

jQuery代码：

$document.readyfunction{ var lastli=null； var ci=$'carinfo'； $'.carlist li'.Hover函数{ 如果lastli==此{return；}否则{ var-top=e.pageY； var left=e.pageX； 如果左侧+100>$window.width{ 左-=100； } ci.html$this.data'info'； css{'top'：top，'left'：left}.show； }，函数e{ var elt=e.toElement | | e.relatedTarget； 如果elt！=this&&elt！=ci[0]{ 隐藏； lastli=null； }否则{ lastli=这个； } }; 滑鼠{ var elt=e.toElement | | e.relatedTarget； 如果elt！=lastli{ 隐藏； lastli=null； } }; }; HTML示例：

2004年福特流浪者 CSS:

ul.carlist{ 列表样式：无； 填充：0； } 卡里斯特·李{ 填充物：5px； 保证金：5px； 背景色：eef； } 卡林福{ 位置：绝对位置； 显示：无； 背景色：白色； 边框：1px纯红； }

---

在问问题之前先表现出你试过什么。调查并表现出我试过了？非常感谢，我实际上正在手动实现它，即预先定义一个静态框并在每个选择上刷新它，但我希望有更好的解决方案。再次感谢你的建议。谢谢@Dan-我已经在使用jquery了。您能更具体地说明jquery/jquerUI如何为解决这个特定问题提供优势吗？谢谢Thomas，我差不多就是这么做的。我希望会有一个插件，但请看我的更新问题。谢谢@Stano，这正是我希望达到的效果。谢谢你，很高兴它有帮助：-很好的回答Stano！我喜欢看到解决方案在JSFIDLE中运行。