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

推薦する

CSS スティッキーフッター実装コード

この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。...

JavaScript と JQuery フレームワークの基本チュートリアル

目次1. JS オブジェクトDOM –1、機能–2、テスト3. jQuery –1. 概要–2、使用...

ウェブサイトのAboutページの紹介コンテンツの書き方

公式、電子商取引、ソーシャル ネットワーキング、個人のいずれの Web サイトでも、訪問者に貴重な時...

MySQLのExcelへのエクスポート方法の分析

この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...

MAC で Mysql5.7.10 のルートパスワードを変更する方法

まず、MySQLをskip-grant-tablesモードで起動します: mysqld --skip...

MySQLで適切なインデックスを選択する方法

まずは栗を見てみましょう EXPLAIN select * from employees where...

HTML の長いテキストは、タグの幅を超えると自動的に切り捨てられます。

長いテキストを表示する場合、C# 側で文字をインターセプトする必要があることがよくありますが、長いテ...

一般的でない js 演算演算子の概要

目次2. カンマ演算子3. JavaScript Null 結合演算子 (??) 4. JavaSc...

VMware12.0 インストール Ubuntu14.04 LTS チュートリアル

私は、デスクトップ バージョンとサーバー バージョンの両方で、仮想マシンにさまざまなイメージを何度も...

データベース接続プール Druid の使用手順

総合的なパフォーマンス、信頼性、安定性、スケーラビリティ、使いやすさなどの要素に基づいて、最適なデー...

HTML での一般的なリダイレクト接続の例コード

コードをコピーコードは次のとおりです。 window.location.href="zcb...

nginx で gzip 圧縮を実装してウェブサイトの速度を向上させる方法

目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...

CSS で 3D ブック効果を実装するためのサンプル コード

さっそく、レンダリングを見てみましょうソースコードは以下のとおりです <!DOCTYPE ht...

Nginx の高同時実行最適化の実践

1. チューニングの必要性​ 私は、どのように書けばいいのか本当に分からないので、共有するために最適...

SQL 文を使用してデータを収集する場合の sum 関数と count 関数の if 判定条件の使用法の説明

まず、例を挙げてみましょう(読みたくない場合は、以下の要約だけ読んでください)。 order_typ...