HTML ドロップダウン ボックスの SELECT オプションを変更する複数の方法

HTML ドロップダウン ボックスの SELECT オプションを変更する複数の方法
フォームが送信されると、返された HTML ページが再レンダリングされ、SELECT コントロールの値や selectedIndex 属性によって、ドロップダウン ボックスがフォームの送信前の状態を保持することはできません。

コードをコピー
コードは次のとおりです。

<SELECT id="idState" style="width:150" name="state" selectedIndex="$!{state}">
<OPTION value="">すべて</OPTION>
<OPTION value="1">パス</OPTION>
<OPTION value="2">不合格</OPTION>
<OPTION value="3">保留中</OPTION>
</選択>

一時的な解決策としては、vm ファイルの最後にスクリプトを追加して、ドロップダウン ボックスに値を割り当てることです

コードをコピー
コードは次のとおりです。

<スクリプト>
$('#idState').val('$!{state}');
</スクリプト>

別の解決策としては、デフォルトの選択を設定することです

コードをコピー
コードは次のとおりです。

<SELECT id="idState" style="width:150" name="state" value="$!{state}">
<OPTION value="">すべて</OPTION>
<OPTION value="1">パス</OPTION>
<OPTION value="2" SELECTED>不合格</OPTION>
<OPTION value="3">保留中</OPTION>
</選択>

VTL の書き方は次のとおりです

コードをコピー
コードは次のとおりです。

<SELECT id="idState" style="width:150" name="state" value="$!{state}">
<OPTION value="">すべて</OPTION>
<OPTION #if($!{state} == 1) SELECTED #end value="1">合格</OPTION>
<OPTION #if($!{state} == 2) SELECTED #end value="2">合格しませんでした</OPTION>
<OPTION #if($!{state} == 3) SELECTED #end value="3">処理対象</OPTION>
</選択>

ここで注意すべき点は、== 比較を実行する場合、Velocity は型を区別するということです。文字列「1」、「2」、「3」と比較すると、常に false になります。
速度の比較の問題<br />速度の場合、比較、特に不等式の比較 (より大きいか小さいか) を含む比較を実装するのは困難です。ここで、ページ上のファイル サイズをカテゴリ (バイト、MB、GB) 別に表示したいのですが、ファイル サイズを比較するという問題があります。これを実現するより良い方法はありますか?
たとえば、次のコード:

コードをコピー
コードは次のとおりです。

#if ($filesize > 1024 && $filesize < 1048567)
#set($ksize = $filesize%1024)
<div class="mlt">ファイルサイズ: $ksize KB
#elseif ($filesize > 1048567 && $filesize < 1073731824)
#set($msize=$filesize%1048567)
<div class="mlt">ファイルサイズ: $msize MB
#elseif ($ファイルサイズ > 1073731824)
#($gsize=$filesize%1073731824)
<div class="mlt">ファイルサイズ: $gsize GB
#それ以外
<div class="mlt">ファイルサイズ: $filesize バイト
#終わり


コードをコピー
コードは次のとおりです。

<PRE class=html name="code"><SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif"><SPAN style="WHITE-SPACE: normal">
</SPAN></SPAN></PRE>
<前へ></前へ>
<前へ></前へ>
<前へ></前へ>

<<:  ページネーションの例とベストプラクティス

>>:  VMware Esxi のルート パスワードを忘れた後に正常に取得する方法

推薦する

Linuxでユーザーが所属するグループを変更する方法

Linuxでユーザーが所属するグループを変更する1. ユーザーのグループを設定する usermod ...

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

ReactプロジェクトにSCSSを導入する方法

まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...

CSS でリスト スタイル属性を設定する方法 (この記事を読むだけ)

リストスタイルのプロパティHTMLには、順序なしリストと順序ありリストの2種類のリストがあります。仕...

Linux での Firewalld の高度な設定の使用に関する詳細な説明

IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...

Vueはミックスインを使用してコンポーネントを最適化します

目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...

ab ツールを使用してサーバー上で API ストレス テストを実行します。

目次1 システムスループットの簡単な紹介2 試験方法2.1 クライアントテストツール2.1.1 GE...

MySQL システム ユーザーが開くことができるファイルの最大数に関する簡単な説明

本から学ぶことは常に浅はかで、これがさらなるダウンタイムを引き起こすことには決して気づきません......

分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明

前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...

TypeScript における型保護の詳細な説明

目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...

MYSQL の 10 の典型的な最適化ケースとシナリオ

目次1. SQL最適化の一般的な手順1. SQL実行計画の分析を説明する2. プロフィール分析を表示...

HTML メタの説明

導入メタタグは、HTML言語のHEAD領域にある補助タグです。 meta は、ページの説明、キーワー...

単一の MySQL テーブルで数千万のデータを処理するアイデアを共有する

目次プロジェクトの背景改善案データ特性を観察するマルチプロセスアイデアの要約データ処理スキルプロジェ...

Docker共通コマンドの詳しい解説 Study03

目次1. ヘルプコマンド2. ミラーコマンド3. コンテナコマンド1. ヘルプコマンド1. 現在のD...

Linuxは、単一のIPをバインドするためにデュアルネットワークカードを実装するためにボンドを使用します。サンプルコード

ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...