7

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

js、css、および png をダウンロードし、例からいくつかのコードをコピーし、独自の非常に単純な例を作成しましたが、何か不足しているに違いありません。選択した.cssと同じように、code.jquery.jsが含まれてロードされることを確認しました。

非常に単純な 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();

これまでのところ、あらゆる種類の順列を変更してテストし、解決策や例をグーグル検索しましたが、何も機能していないようです. おそらくどこかでセミコロンが欠けているなど、非常にばかげたものですが、この「10分間の実装」に多くの時間を費やしたので、助けを求める必要があります。

https://github.com/harvesthq/chosen

4

7 に答える 7

5

「最も基本的な」例を本当にテストしたい場合は、次のことをお勧めします。

  1. ハードコーディングされた HTML での作業 (vs 動的に追加された HTML)
  2. select要素からすべての属性を削除します
  3. 基本的な例が正常に実行されたら、属性をselect要素に追加し直してください。

要素のmultiple="multiple"属性により、異なる動作が行われることに注意してください。selectchosen.js

ここでコードを実行しました: http://jsfiddle.net/99Dkm/1/

そして、それはうまく機能します。

問題はchosen.jsライブラリではなく、それをどのように使用するかだと思います（いくつかの基本的なjQuery onready関数が見つからないか、そうでない場合にラップします）。

jsFiddle での作業例では、chosen.css&のみを含めたことに注意してくださいchosen.jquery.js。

注: http://cdnjs.com/libraries/chosenからこれらのファイル (javascript & css) の URL を取得します。

于 2014-06-13T10:09:58.250 に答える
1

フィールドに動的に入力すると、JSON 結果セットは "Text" および "Value" 属性で返されますか? そうでない場合、Chosen はリスト内で結果を適切にフォーマットしません。実際、それらはまったく追加されません。私の結果は最初は代わりに「名前」と「ID」属性で戻ってきたので、これを苦労して学びました。

于 2012-08-03T15:42:58.850 に答える
1

選択ボックスから size="1" 属性を削除するか、幅の広いスタイル属性を設定してみてください。選択された要素の幅は、下にある選択ボックスの幅に基づいているため、選択ボックスが非常に小さい場合、選択された選択も同様になります。それが役立つことを願っています。

于 2013-04-26T15:37:18.253 に答える
1

同様の問題に遭遇しました。私の状況ではこれが機能したため、何が原因であるかを特定できませんでした：

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

    }, 
    function(){
         //remove event
    });
于 2013-10-23T01:22:51.587 に答える
1

jQueryコードを内側にラップします:-

$(document).ready(function(){
  $('.chosenElement').chosen();
});
于 2013-09-24T21:01:34.700 に答える
1

選択をターゲットにする必要があります

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

jsフィドル

于 2011-09-26T22:21:06.510 に答える