jQuery ui可选择不起作用

时间:2015-04-16 23:50:30

标签: jquery jquery-ui-selectable

<ol>
    <li>tafe</li>
    <li>college</li>
    <li>uni</li>
    <li>school</li>
</ol>

<script>
    $("ol").selectable();
</script>

我可以围绕元素制作一个框,但我无法单独或在组中选择元素。

3 个答案:

答案 0 :(得分:1)

在我将相关库包含在html中后,它对我有用:

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

以下是演示:https://jsfiddle.net/6cht0v0L/

jquery代码:

 $(function() {
      $( "#selectable-1" ).selectable();
 });

这是html:

 <ol id="selectable-1">
     <li class="ui-widget-content">Product 1</li>
     <li class="ui-widget-content">Product 2</li>
     <li class="ui-widget-content">Product 3</li>
     <li class="ui-widget-content">Product 4</li>
     <li class="ui-widget-content">Product 5</li>
     <li class="ui-widget-content">Product 6</li>
     <li class="ui-widget-content">Product 7</li>
  </ol> 

答案 1 :(得分:1)

我认为问题在于CSS。我有同样的问题。我刚刚加入ui-selected{background:gold;}并且它有效。不要忘记包括这些:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

如果您的代码仍然无效,请使用inspect元素

查看确切的问题

答案 2 :(得分:0)

你需要在jQuery onload函数中包装调用

<script>
$(function() {
    $( "ol" ).selectable();
});
</script>

Doc:https://jqueryui.com/selectable/