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

推薦する

HTML マーキー文字フラグメントのスクロール

その特性は次のとおりです。方向アクティブな字幕のスクロール方向を設定するコードは次のとおりです。 &...

CentOS 7 での Docker プロキシの設定 (Linux での Systemd サービスの環境変数設定)

Docker デーモンは、 HTTP_PROXY 、 HTTPS_PROXY 、およびNO_PRO...

Linux で MySQL スケジュールタスクを実装する方法

前提: ストアド プロシージャは、毎日午後 10 時から午前 5 時まで 10 分ごとに実行されます...

Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法

ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...

Linux で Bash コマンド プロンプトをカスタマイズする方法

序文ご存知のとおり、bash (Bourne-Gain Shell) は、ほとんどの Linux デ...

クラウド サーバー Ubuntu_Server_16.04.1 に MySQL をインストールしてリモート接続を有効にする方法

1. MySQLをインストールします。対応するソフトウェアをインストールするには、次の 3 つのコマ...

フレックスレイアウトの改行スペースでの align-content の使用

1. この記事で実装した効果図は以下のとおりです。レイアウトの右側に Flex レイアウトを使用し、...

Vueはリストのシームレスなスクロールを実装します

この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...

Webデザイナーの成長体験

<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...

MySQLデータベースが大きすぎる場合にバックアップと復元を行う方法

コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...

VMware仮想マシンの起動時に黒い画面が表示される問題を解決する

# VMware ハードディスクの起動優先順位を調整するステップ 1: 電源をオンにすると、BIOS...

テキストエリアのテキストをHTMLに変換する方法、つまり復帰改行について

説明: テキストエリアの値の改行を新しい行に変更しますコードをコピーコードは次のとおりです。 <...

HTML特殊文字の徹底分析

HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...

CSS3 を使用して円形スクロール プログレス バー アニメーションを作成する例

テーマ今日は、CSS3 を使用して円形スクロール プログレス バー アニメーションを作成する方法を説...

Web ページ制作におけるテーブル属性 CellPad、CellSpace、Border の説明と使用

cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...