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

推薦する

MySQL 5.7.19 winx64 無料インストールバージョン設定チュートリアル

mysql-5.7.19-winx64インストールフリー版の設定方法、参考までに具体的な内容は以下の...

iframe タグの使用方法の詳細な説明 (属性、透明度、適応高さ)

1. iframe の定義と使用法iframe 要素は、別のドキュメントを含むインライン フレーム...

Mysql マスタースレーブ サービスの実装例を構成する

Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...

Win10の明るさ調整効果を模倣するHTML+CSS+JSサンプルコード

HTML+CSS+JS で Win10 の明るさ調整効果を模倣コード <!doctypehtm...

MySQL データベースに基づくデータ制約の例と 5 つの整合性制約の紹介

非準拠データがデータベースに入るのを防ぐために、ユーザーがデータを挿入、変更、削除、その他の操作を行...

jsネイティブウォーターフォールフロープラグイン制作

この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...

LinuxはRsync+Inotifyを使用してローカルとリモートのデータのリアルタイム同期を実現します。

0x0 テスト環境本社本番サーバーと支社バックアップサーバーはリモートデータバックアップが必要です...

vue3+electron12+dll 開発のためのクライアント構成の詳細な説明

目次リポジトリソースを変更する起動するvue-devtoolsを置き換える予防ボーダーレスウィンドウ...

VUEのデータプロキシとイベントの詳細な説明

目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...

MySQL 実験: explain を使用してインデックスの傾向を分析する

概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...

JavaScript はクラス宝くじアプレットを実装します

この記事では、クラス抽選アプレットを実装するためのJavaScriptの具体的なコードを参考までに紹...

CentOS8 でローカル yum ソースを構成するための詳細なチュートリアル

centos8 ディストリビューションは、BaseOS および AppStream リポジトリを通じ...

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

MySQLのダウンロードとインストール(バージョン8.0.20)のチュートリアルは参考までに、具体的...

WeChatアプレットはウォーターフォールフローのページングスクロール読み込みを実装します

この記事では、WeChatアプレットのウォーターフォールフローページングスクロールロードを実装するた...