我在选择框上应用了工具提示,我想知道是否有可能在我做出选择时实时刷新工具提示内容。
我的代码看起来像这样:
$(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>
答案 0 :(得分: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>