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 のルート パスワードを忘れた後に正常に取得する方法

推薦する

ApacheとTomcatによるクラスタ環境構築プロセスの分析

実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...

仕事の効率を上げるJS略語スキル20選

目次複数の変数を同時に宣言する場合は、1 行に短縮できます。分割代入は複数の変数に同時に値を割り当て...

MySQLの遅いクエリ問題の詳細な分析データ送信

例を通して、MySQL のデータ テーブル送信のクエリが遅い問題の解決策を共有しました。最近、コード...

HTML フォームタグチュートリアル (3): 入力タグ

HTML フォーム タグのチュートリアル。このセクションでは、主に Web ページで INPUT タ...

一般的な Linux ツール vi/vim の完全版

なぜvimを学ぶのかLinuxには多数の設定ファイルがあるため、Linuxには多くのテキスト処理ツー...

nginx/apache 静的リソースのクロスドメインアクセスの問題を解決する詳細な説明

1. Apache 静的リソースのクロスドメイン アクセスApache設定ファイルhttpd.con...

Dockerでコンテナを作成するときのディレクトリ権限

昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...

CSSは親コンテナのdivをimg画像で埋め、コンテナのサイズに適応します。

ページに複数の画像を導入すると、画像のサイズがばらつくことがあります。しかし、それらを一貫したサイズ...

React Router で履歴リダイレクトを使用する方法

react-routerでは、コンポーネント内のジャンプは<Link>で使用できます。し...

vue ディレクティブ v-bind の使用と注意点

目次1. v-bind: 要素の属性にデータをバインドできる2. v-bind: は次のように省略で...

Vueカスタムディレクティブの詳細

目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...

MySQL ストアドプロシージャの長所と短所の分析

MySQL バージョン 5.0 ではストアド プロシージャのサポートが開始されました。ストアド プロ...

nginx ssl を設定して https アクセスを実装する手順 (初心者向け)

序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...

Python MySQL データベース テーブルの変更とクエリ

Python は MySQL に接続してデータベース テーブルを変更およびクエリします。 pytho...

MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...