selected.js：誰かが実際の実例を持っていますか？

Question

基本的なselected.jsコードを使用しカスタマイズした人はいますか？

私はjs、css、pngをダウンロードし、サンプルからいくつかのコードをコピーして、私自身の非常に単純な例を書いたが、何か不足しているはずです。私はcode.jquery.jsが含まれており、selected.cssと同じように読み込まれることを確認しました。

極端に単純なSELECTフィールド（ドロップダウン）を表示しようとすると、非常に小さなフィールドが表示され、フィールドをクリックすると何も行われません。 selected.jsを無効にすると、単にすべてのオプションが表示された状態でSELECTを取得します。

は、ここで私は（この例では、それはすべてのハードコーディングされていますが、私は、動的にフィールドを設定する必要がある）のjQuery内の単純なSELECTを追加する方法は次のとおりです。

$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>'; 

その後、私はモーダルダイアログボックスが表示され、右ときオプションを含む、私は呼ん：

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

これまでのところ、私は修正され、順列のすべての種類をテストし、溶液または例のためにGoogleで検索し、何も動いていないようにみえてきました。おそらくどこかにセミコロンがないような、非常にばかげたものかもしれませんが、私はsoemヘルプを依頼する必要があるこの「10分の実装」で非常に時間を無駄にしました。

https://github.com/harvesthq/chosen

Answer 1

あなたが動的にフィールドを移入すると、JSONの結果セットが/ "テキスト" wが戻って来ていると "バリュー"

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

jsFiddle

Answer 2

選択を対象とする必要があります属性？そうでない場合、Chosenはそのリスト内で結果を適切にフォーマットしません。実際、それはまったく追加しません。私は結果が最初に "名前"と "ID"属性で戻って来たので、これは難しい方法を学んだ。

Answer 3

選択ボックスからsize = "1"属性を削除したり、より幅の広いスタイル属性を設定してみてください。 Chosenは、生成された要素の幅を基になる選択ボックスの幅に基づいているため、選択ボックスが非常に小さい場合、選択された選択も同様になります。希望が役立ちます。

Answer 4

内部のjQueryのコードをラップ： -

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

Answer 5

は、同様の問題に遭遇しました。私は、これが働いていた私の状況でそれをすることによって引き起こしていたかを把握することができませんでした：

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

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

Answer 6

あなたが本当に「最も基本的な」例をテストしたい場合は、私がお勧めしたい：

1. ハードコードされたHTMLの作業（対動的にHTMLを追加しました）
2. は、基本的な例が正常に動作たら
3. のみselect要素に属性を再度追加select要素からすべての属性を削除します。

select要素のmultiple="multiple"属性が異なっchosen.js動作させることができないことに注意してください。

私はここにあなたのコードを実行していますhttp://jsfiddle.net/99Dkm/1/

そして、それだけで正常に動作します。

私は問題がchosen.jsライブラリではなく、（基本的なjQueryのonready関数が不足しているかどうかにかかわらず）どのように使用するか疑問に思っています。

jsFiddleに関する私の作業例では、私はchosen.css & chosen.jquery.jsしか含んでいないことに注意してください。

注：選択したオプションのドキュメントが含まれhttp://cdnjs.com/libraries/chosen

Answer 7

からそれらのファイル（ジャバスクリプト& CSS）のURLを取得：

に選ばがインスタンス化されるとき、あなたの選択が非表示になっている場合、あなたは を指定する必要があります。幅または選択が幅0で表示されます。

ゼロ幅のフィールドが表示されないようにするには、「幅」オプションを使用する必要がありますオンにするか、Chosenを呼び出すときに元のSelectが表示されていることを確認します。