web-dev-qa-db-ja.com

セマンティックUI：ドロップダウンのデフォルト/プレースホルダー値の問題

' Semantic UI 'フレームワークを使用してhtmlフォームの作成に取り組んでいます。ドロップダウン/選択リストに通常の選択項目を使用している間、セマンティックUIを使用してスタイルを設定しています。すべて正常に機能しますが、ドロップダウンから値を選択すると、エンドユーザーとしてオプション/値の選択を解除できません。

この中で [〜＃〜] fiddle [〜＃〜] と仮定し、「男性」を選択し、オプションの選択を解除して、プレースホルダー/デフォルトのテキスト「性別」を表示したい場合は、できません。誰かが、ドロップダウンではなく通常のhtml選択アイテムとして選択を機能させる方法を見つけるのを手伝ってもらえますか？

HTMLコード

<div class="field">
            <label style="width: 250px">Select a Gender</label> <select
                name="skills" class="ui fluid dropdown">
                <option value="">Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
</div>

JavaScriptコード

$(".ui.fluid.dropdown").dropdown({})
javascripthtml-selectsemantic-ui
10
Phanikanth

これを試して ：

$('select.dropdown').dropdown({placeholder:'Your placeholder'});

詳細については、 セマンティックUI （または 中国語バージョンの場合はセマンティックUI CN ）を参照してください。

13
Alsmile

従来のHTML<select>要素では、空の値の<option value="">Gender</option>を別のドロップダウンメニュー項目として扱います。

ただし、セマンティックUIは、プレースホルダーテキストとして空の値<option>を使用します。選択可能なオプションとしてGenderが必要な場合は、プレースホルダーテキストに依存しない別のアイテムにする必要があります。

選択をクリアする機能が必要な場合は、これを処理するためのより優れたUXパラダイムがあると思います。たとえば、次を呼び出す外部clear selectionボタンを使用できます。

$('.ui.fluid.dropdown').dropdown('clear')

もう1つのより合理化されたオプションは、複数選択ドロップダウンを使用して、 例ページ の最初の例であるmaxSelections = 1を制限することです。そうすることで、ユーザーは何かを選択したという印象を受け、選択をクリアするには、同じドロップダウンコンテナ内の要素を使用します。

6
J3Y

セマンティックUIの.dropdown()は、デフォルトでselectからnull値を削除することを知っておく必要があります。

それにもかかわらず、あなたが探しているものへのいくつかのアプローチがあります。

チェック このフィドル 。

2
Ashkon
$('.ui.dropdown').dropdown({
  clearable: true
});
1
Michael Batista