html，javascript：滚动列表框项目 - 并显示每个项目的提示[关闭]

Question

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

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

      });

希望对您有所帮助！