-1

我想要一个非常类似于“提问”页面上的框，它解释/澄清了表单的每个字段应该输入什么样的数据。我试图在此页面上“查看源代码”，但我根本无法对正在发生的事情做出正面或反面。有人可以解释一下还是有我可以使用的教程？

例子：

  1. 当用户单击文本输入框时，该框会解释应该去那里的内容

  2. 标有公司类型的下拉菜单，其中包含多种公司。用户一直在对自己进行错误分类，因为他们不了解每种类型所指的内容。当用户单击下拉菜单时，框中的文本会解释每种公司类型。

请参阅表格部分截图的链接：http: //imgur.com/TYOmT

我还想让框沿着表单向下移动（以便它始终位于用户正在使用的字段的右侧）

谢谢！

4

1 回答 1

0

给定 HTML 如下：

    <form>
        <select name="some_name" id="some_name">
            <option value="option1" data-description="Description of option1">option1</option>
            <option value="option2" data-description="Description of option2">option2</option>
        </select>
    </form>
    <div id="description">
        Default Description
    </div>​

以下 javascript 将采用data-description所选选项的值，并用它填充#description。

    var $description = $('#description');
    $('#some_name').on('change', function(event){
        var $option = $(event.currentTarget).find(':selected');
        $('#description').html($option.attr('data-description'));
    });

这是一个工作示例。

通过为每个输入创建额外的处理程序或为表单上的任何输入创建处理程序，您可以轻松地扩展它以创建一些内容以为每个特定输入提供更多信息。

有多种不同的方法可以使描述保持固定，使用display:fixed或类似 Twitter Bootstrap 的affix。

于 2012-09-26T01:18:53.207 回答