2009-08-20 63 views
14

我正在尋找關於事件和UI對象的jQuery可選擇事件的信息:「選擇」和「開始」作爲參數。我無法在文檔中找到此內容,並且通過屬性循環無濟於事。如何找到選擇的元素與JQuery UI可選

$('#content_td_account').selectable({ 
    filter: 'li:not(".non_draggable")', 
    selecting: function(event, ui) { 
    } 
}); 

我特別想找到正在選擇什麼樣的元素,並檢查他們,看看他們的父元素是相同的或沒有。我認爲這將是在某個地方的用戶界面對象。

回答

12

當選擇一個元素時,它將獲得ui-selected類添加。

所以,你可以得到與$(".ui-selected")

這可能不完全是工作的所有選定的元素,但我認爲這個想法是這樣的:

$('#content_td_account').selectable({ 
    filter: 'li:not(".non_draggable")', 
    selecting: function(event, ui) { 
    var p = $(this).parent(); 
    $(".ui-selected").each(obj, function() { 
     if(obj.parent() == p) { 
     // get rad 
     } 
    }); 
    } 
}); 
+3

ui財產有沒有辦法使用「ui」參數獲取當前選擇?當使用stop:funtion(event,ui){}時,可選參數ui總是似乎未定義... – RYFN 2009-09-04 14:02:06

+2

-1這不是一個好方法。你應該使用$(ui.selected) – nima 2012-01-24 10:25:52

+3

@nima我在想,近2.5年前,情況並非如此。發佈答案。 – 2012-01-24 14:41:18

0

這將解決你的問題:

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


<div class="demo"> 

<p id="feedback"> 
You've selected: <span id="select-result">none</span>. 
</p> 

<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> 

檢出http://jqueryui.com/demos/selectable/#serialize瞭解更多信息

10

您必須使用選定和未選定的事件,這些事件會針對組選擇中的每個選定項目進行觸發。

var selected = new Array(); 
$("#selectable").selectable({ 
    selected: function(event, ui){    
     selected.push(ui.selected.id); 
    }, 
    unselected: function(event, ui){ 
     //ui.unselected.id 
    } 
}); 
+0

什麼是selected.push中的「selected」? – ses 2013-07-26 21:20:39

+0

selectable是存儲選定ID的數組。但是,如果用戶進行多項選擇然後更改選擇會怎樣。你需要想出一個刷新列表的機制,以便只有最新的選擇實際上是有效的ID列表。最好的方法是調用一個函數並創建一個數組,當需要對這些選定的id執行一個操作時,填充所有選定的id,例如更改背景顏色等。 – kalibrain 2017-05-18 20:25:25

-1

在該事件的UI參數是參考elemenent, 如果它被選擇的事件ui.selected事件將是elemennt,如果它是取消選擇unselected.ui .....等

1

通過使用:last:first選擇不是選擇的第一但在li

此順序中的第一是我所管理的解決方案:

HTML

<ol class="selectable">        
    <li class="ui-widget-content" 
     id="selectable_1" 
     value="1" 
    > First Selectable </li> 
    <li class="ui-widget-content" 
     id="selectable_2" 
     value="2" 
    > Second Selectable </li> 
</ol> 

在這段代碼我給li ID和價值,從而使它們可供選擇事件

JAVASCRIPT

//A place to put the last one 
var last_selected_value; 
var last_selected_id; 


$(".selectable").selectable({ 
    selecting: function(event, ui) { 

     //In the selection event we can know wich is the last one, by getting the id on 
     //the ui.selecting.property 

     last_selected_value = ui.selecting.value; 
     last_selected_id = ui.selecting.id; 
    }, 
    stop: function(event, ui) { 

     //Here the event ends, so that we can remove the selected 
     // class to all but the one we want 

     $(event.target).children('.ui-selected').not("#" + last_selected_id) 
      .removeClass('ui-selected'); 

     //We can also put it on a input hidden 
     $("#roles_hidden").val(last_selected_value); 
    } 
});