selected.js :: Czy ktoś ma rzeczywisty przykład pracy?

Question

Czy ktoś użył i dostosował jakiś podstawowy kod selected.js?

Pobrałem js, css i png, skopiowałem kod z przykładów, napisałem własny super prosty przykład, ale muszę czegoś nie zauważyć. Zweryfikowałem, że plik code.jquery.js jest dołączony i zostanie załadowany, to samo z plikiem selected.css.

Kiedy próbuję przywołać nawet bardzo proste pole SELECT (drop-down), otrzymuję bardzo małe pole, a kliknięcie pola nic nie robi. Kiedy wyłączam selected.js, po prostu otrzymuję SELECT z wszystkimi wyświetlanymi opcjami.

Oto jak dodać prosty SELECT wewnątrz jQuery (muszę wypełnić pole dynamicznie, chociaż w tym przypadku to wszystko jest zakodowane):

$html = '<select name="items" id="items" multiple="multiple" size="1" class="chosenElement">'; 
    $html += '<option value="foo">foo</option>'; 
    $html += '<option value="bar">bar</option>'; 
    $html += '<option value="baz">baz</option>'; 
    $html += '<option value="qux">qux</option>';  
    $html += '</select>'; 

Następnie, tuż po I wyświetlić okno modalne zawierający opcje, wzywam:

$('.modal-body').html($html); 
$('.chosenElement').chosen(); 

do tej pory zostały zmodyfikowane i przetestowane wszystkie rodzaje permutacji, google dla rozwiązań lub przykładów, ale nic nie wydaje się działać. To chyba coś bardzo głupiego, jak gdzieś gdzieś brakuje jakiegoś średnika, ale zmarnowałem tyle czasu na "10-minutową implementację", że muszę prosić o pomoc dla Soema.

https://github.com/harvesthq/chosen

Answer 1

trzeba kierować select

$('#items').chosen(); 

jsFiddle

Answer 2

Kiedy wypełnić pole dynamicznie, jest JSON wynik zestaw wraca w/"Tekst" i "wartość" atrybuty? Jeśli nie jest, wybrana opcja nie sformatuje poprawnie wyników na liście. W rzeczywistości wcale ich nie doda. Nauczyłem się tego na własnej skórze, ponieważ moje wyniki początkowo wracały z atrybutami "Nazwa" i "ID".

Answer 3

Spróbuj usunąć atrybut size = "1" z pola wyboru i/lub ustawiając atrybut stylu o większej szerokości. Wybrany bazuje na szerokości wygenerowanych elementów na szerokości podstawowego pola wyboru, więc jeśli twoje pole wyboru jest bardzo małe, wybrane będzie również wybrane. Nadzieja, która pomaga.

Answer 4

owinąć kod jQuery wewnątrz: -

$(document).ready(function(){ 
    $('.chosenElement').chosen(); 
}); 

Answer 5

wpadł na podobny problem. I nie był w stanie dowiedzieć się, co było przyczyną go w mojej sytuacji to działało:

$j('select').livequery(
    function(){ 
     $j(this).chosen({width: "300"}); 
     $j('.search-field input').height(14); 

    }, 
    function(){ 
     //remove event 
    }); 

Answer 6

Jeśli naprawdę chcesz testować „najbardziej podstawowe” przykład, sugeruję:

1. prace nad zakodowanego na stałe HTML (vs dynamicznie dodawane html)
2. Usuń wszystkie atrybuty z elementu select
3. dodać atrybuty tylko z powrotem do elementu select raz podstawowym przykładem działa poprawnie.

Należy zauważyć, że atrybut multiple="multiple" na elemencie select robi chosen.js zachowują się inaczej.

Mam prowadził swój kod tutaj: http://jsfiddle.net/99Dkm/1/

I to działa dobrze.

Podejrzewam, że problem nie jest biblioteką chosen.js, ale raczej jak go używasz (zawijanie wewnątrz jakiejś podstawowej jQuery, gdy brakuje już funkcji).

Zauważ, że w moich roboczych przykładach na jsFiddle zawarłem tylko chosen.css & chosen.jquery.js.

uwaga: uzyskać adresy URL dla tych plików (javascript & CSS) od http://cdnjs.com/libraries/chosen

Answer 7

Dokumentacja od wybranej opcji obejmuje:

Jeśli Twój select jest ukryty, gdy wybrany jest tworzony, należy określić szerokość lub zaznaczenie pojawi się z szerokością 0.

Aby uniknąć pojawienia się pola o zerowej szerokości, musisz użyć opti "width" włącz lub upewnij się, że oryginalny wybór jest widoczny po wybraniu opcji Wybrane.