web-dev-qa-db-ja.com

デフォルトでは表示されない選択ドロップダウンで選択が機能しない

デフォルトでは何も表示されない選択ボックスがdivにあり、クリックイベントでdivの表示プロパティがブロックに変更されましたが、選択ドロップダウンが表示されず、空のスペースが表示されています。 divの可視性を変更しているのと同じトリガーされた関数で、選択ボックスのchosen（）メソッドを呼び出しました。

これが私の問題のコードです。

<div class="controls" style="display:none" id="Department-11">
    <select multiple="" class="chosen-select1" id="form-field-select-4" data-placeholder="Choose a Department...">
        <option value="Management">Senior Management</option>
        <option value="Legal">Legal</option>
        <option value="Operations">Operations</option>
        <option value="Administration">Administration</option>
        <option value="R&D">R&D</option>
        <option value="Sales & Marketing">Sales & Marketing</option>
        <option value="Finance">Finance</option>
        <option value="Technology">Technology</option>
        <option value="Customer Service">Customer Service</option>
        <option value="Pro Services">Pro Services</option>
        <option value="HR">HR</option>
        <option value=""></option>
    </select>
</div>

<a href="javascript:void(0);" onclick="showselect();">
    Show select
</a>

そしてJSコードは

function showselect() {
    $('#Department-11').show();
    $(".chosen-select1").chosen();
}
jqueryjquery-chosen
13
Umar Adil

CSSを追加.chosen-container { width: 220px !important; }

21
Umar Adil

別の解決策は、以下のように初期メソッドで要素の幅を設定することです。

$(".chosen-select1").chosen({ width:"95%" });
28
anhtuangv

とてもシンプルです。 Jqueryにこの行を追加します。わたしにはできる。

$（ "。chosen-select1"）。val（ "Legal"）。trigger（ "chosen：updated"）;

1
Ravindra