JQuery UI可选：预选列表项

我想实现可选列表的第一项的点击。我可以添加CSS ，但无法获得点击事件工作，当我尝试预先选择第一项（我需要点击，因为onclick事件有一个Ajax调用来填充另一个div上的相关信息..）我甚至试图使用触发器方法，但无法得到这个工作列表上的第一个项目。代码是标准的东西。JQuery UI可选：预选列表项

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

jQuery函数

 $(function() { 
     $("#selectable").bind("mousedown", function (e) { 
      e.metaKey = false; 
     }).selectable({ 
      selected: function(event, ui) { 

       alert("selected"); 

      }, 
      stop: function() { 
       var result = $("#select-result").empty(); 
       $(".ui-selected", this).each(function() { 
        var index = $("#selectable li").index(this); 
        result.append(" #" + (index + 1)); 
       }); 
      } 
     }); 
    });

我的CSS适用于第一个列表项这样

$('li:first-child').select().addClass("ui-selected");

，但我不能让点击功能工作（点击将调用'选中'匿名回叫。）任何指针都会有帮助/。

来源

2011-12-09 Sunil M

你可以把你的例子在[jsfiddle]（jsfiddle.net）？所以其他人可以帮助你 –

经过一番尝试，我设法得到它working.Posting解决方案，因为它可能是有用的。我要模拟在选择list.For上的第一个项目的鼠标点击，我们首先需要绑定

$("#selectable").bind("selectableselected", function(event, ui) { 

    $(".ui-selected", this).each(function() { 
    var index = $("#selectable li").index(this); 
    alert("test"); 


    }); 
    });

一旦你做到这一点，我们需要火click.I把这个在创建回调哪些只要可选择形成，就会被调用。

create: function(event, ui) { 
      setTimeout(function() { 
    $('li:firstchild').addClass("uiselected").trigger('selectableselected'); 

      }, 100);

关于jquery的伟大之处在于它很直观。

来源

2011-12-13 15:58:11

你忘了关闭你的创建函数。此外，这个班级是'ui-selected'而不是'uiselected'。 – joshmmo

JQuery UI可选：预选列表项

回答

相关问题