显示每个选择选项jquery的描述

Question

我遇到了一个问题,并希望有助于设计一个创造性的,轻量级的方法.每次用户从选择列表中选择选项时,我都需要显示描述性文本.我会使用类似的东西:

$('#description').html($(this).attr('title') );

但是标题标签被一个名为msDropdown(剥皮插件)的插件使用,并且由于它而似乎无法正常运行.

任何帮助表示赞赏.

Answer 1

如果我是你,我会避免使用该title属性.这不是它的用途.使用自定义data-属性 - 它们具有语法意义,是HTML5下的有效HTML,并且在所有浏览器中都能很好地运行,jQuery将它们集成到其data()功能中.

例如:

HTML:

<select id="mySelect">
    <option value="1" data-description="Item 1">Item 1</option>
    <option value="2" data-description="Item 2">Item 2</option>
    <option value="3" data-description="Item 3">Item 3</option>
</select>
<span id="description"></span>

jQuery的:

$('#mySelect').change(function(){
    var $selected = $(this).find(':selected');

    $('#description').html($selected.data('description'));
}).trigger('change'); // run handler immediately

参见jsFiddle示例.