Question

我在选择框上应用了工具提示，我想知道是否有可能在我做出选择时实时刷新工具提示内容。

我的代码看起来像这样：

$(document).tooltip({
        items: 'select',
        content: function() {
            var content = "";

            $(this).find(':selected').each(function() {
                content += $(this).text() + "<br/>";
            });

            return content;
        },
        position: {my: 'right top', at: 'left top'}
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
<select multiple>
  <option value="1" selected>opt1</option>
  <option value="2">opt2</option>
</select>

Answer 1

重新绘制工具提示的最简单方法是在其上调用close和open方法，您可以在change事件处理程序中执行此操作。但是，as stated in the documentation要使open保持一致，您必须在<select>标记本身上创建小部件，而不是从document委派它：

$('select').tooltip({
        items: 'select',
        content: function() {
            var content = "";

            $(this).find(':selected').each(function() {
                content += $(this).text() + "<br/>";
            });

            return content;
        },
        position: {my: 'right top', at: 'left top'}
    })
.change(function() {
    $(this).tooltip('close').tooltip('open');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
<select multiple>
  <option value="1" selected>opt1</option>
  <option value="2">opt2</option>
</select>

在选择框上刷新jquery ui工具提示的内容

1 个答案: