select2.js を使用すると、1 つのことを除いてうまく機能するドロップダウン メニューがあります。最初のオプションをクリックしても何も起こらず、ドロップダウンがフォーカスを失うと、プレースホルダーがボックスを埋めます。40 のオプションのいずれかが選択されている場合、その値のテキストがドロップダウン ボックスに表示され、アプリでその値を使用できます。
オプション (最初のオプション以外) を選択して最初のオプションをもう一度クリックすると、最初のオプションの値がボックスに表示され、問題なく使用できます。この問題は、ロード時にのみ発生します。
JS
$('.selectArea').select2({
placeholder: 'Area #',
allowClear: true,
disabled: false
});
ローカル json ファイルを使用してドロップダウンに入力しました。
$.getJSON('areaList.json', function(json) {
for(i = 0; i < json.length; i++){
$('<option>').attr('value', json[i].MGNT_AREA).text(json[i].MGNT_AREA).appendTo('.selectArea');
}
});
HTML
<select class="selectArea" style='width: 120px; font-family: Arial'></select>
私の目標は、ドロップダウン ボックスにプレースホルダーを含むページを読み込めるようにし、最初のオプションをクリックしてボックスに入力できるようにして、その値をアプリの他の部分に使用できるようにすることです。
どんな助けでも大歓迎です。