ドロップダウンリストが選択された値を更新されていません（SemanticUI）

Question

私は、ドロップダウンリストの私のページの一番下にある

<div class="ui dropdown"> 
    <input type="hidden" name="gender"> 
    <i class="dropdown icon"></i> 
    <div class="default text">Gender</div> 
    <div class="menu"> 
    <div class="item" data-value="male">Male</div> 
    <div class="item" data-value="female">Female</div> 
    </div> 
</div> 

ためSemanticUIを使用しています、私は

jQuery(document).ready(function($) { 
    $('.ui.dropdown') 
    .dropdown() 
; 
}); 

問題としてそれを初期化していますユーザーがアイテムを選択すると、アイテムは更新されず、選択されたままの状態でデフォルト値が表示され続けます。 しかし、Chrome Consoleにアクセスして上記のコードJQuery（ドキュメント）を実行すると、正常に動作します。

ページロードが完了した後に初期化を実行する必要があると仮定しています。だから私がしたのは、上記の代わりに以下のものです：

window.addEventListener("load", function(){ 
jQuery(document).ready(function($) { 

    $('.ui.dropdown') 
    .dropdown() 
; 
}); 
});; 

それは働いた。ドロップダウンリストは即座に選択内容を更新します。しかし、Submitをクリックすると、Iとページがリロードされ、選択が失われます。 ドロップダウンがテーブルのフィルタとして使用されています。サブミット時に選択が失われると、フィルターを使用できなくなります。

これを回避する最良の方法は何ですか。

Answer 1

AJAXを使用してフォームを送信すると、ページが更新されません。

Answer 2

<select> 
 
    <option value="male">Male</option> 
 
    <option value="female">Female</option> 
 
</select>

余分なjsのない、CSSが必要な、

編集：それはデフォルト