2013-04-13 85 views
0

我有一個非常簡單的選擇框內比預期「這個」返回不同的對象:JS功能

<select multiple="multiple" name="Condiments"> 
    <option selected="selected">Mustard</option> 
    <option selected="selected">Ketchup</option> 
</select> 

,我使用jQuery UI的Widget多選,以使它有點spiffier:

https://github.com/ehynds/jquery-ui-multiselect-widget

具體來說,我試圖設置其中一個選項動態當小部件初始化。當我這樣做:

$("select").multiselect({ 
    selectedText: function(numChecked, numTotal, checkedItems){ 
    return "Foo"; 
    } 
}); 

它正確地設置selectedText選項「富」,但是當我這樣做:

$("select").multiselect({ 
    selectedText: function(numChecked, numTotal, checkedItems){ 
    return $(this).attr("name"); 
    } 
}); 

它認爲$(這)是從別的地方的跨度DOM。

如果頁面上只有一個選擇,這將是很好,但有多個我需要一種方法來設置每個選項。有從$(this)到當前select元素的顯而易見的方法嗎?或者是解決相同的一般問題的明顯替代方案?

+0

小提琴請 –

+0

由於$(「選擇」0是一個數組在多個選擇的情況下,$(this )將指向全局窗口對象。使用類或id來指定所需的選擇 – mozillanerd

回答

2

我認爲在selectedText回調中,this是爲對象<select>提供多重選擇功能的JavaScript對象。它有一個element屬性,它是一個包裝<select>元素的jQuery對象。

因此,你應該使用:

$("select").multiselect({ 
    selectedText: function(numChecked, numTotal, checkedItems){ 
     return this.element.attr("name"); 
    } 
}); 
0

用於初始化那些需要從沒有內置的插件元素實例傳遞特定的數據或屬性的多個元素插件的常用方法是在循環遍歷使用each元素集合:

$('select').each(function(){ 
    /* "this" will be instance of "select"*/ 
    /* prep data needed before initialiizing plugin*/ 

    var name= this.name; 
    /* initialize plugin for current instance of element*/ 
    $(this).multiselect({ 
     selectedText: function(numChecked, numTotal, checkedItems){ 
     /* variable declared above*/ 
     return name; 
     } 
    }); 

}); 

我不知道特定插件,或者是什麼this是回調之內,但使用所示的做法是沒有必要知道的實例已經被隔離在each循環中

編輯。我寫這個沒有考慮插件是爲<select> elemnt。不知道爲什麼你會想要返回name ..將會是相同的任何選項