1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLドロップダウンボックスのSELECTオプションを変更するさまざまな方法

2022-01-16 14:20:53
フォームを送信した後に返される HTML ページは再描画され、SELECT コントロールの value および selectedIndex プロパティのいずれも、ドロップダウン・ボックスがフォーム送信前の状態を保持することを可能にします。
コピーコード
コードは以下の通りです。

<SELECT id="idState" style="width:150" name="state" selectedIndex="$! {state}">
<OPTION value="">all</OPTION>
<OPTION value="1">Pass</OPTION>
<OPTION value="2">end-passed</OPTION>
<OPTION value="3">Pending</OPTION>
</SELECT>

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

<script>
$('#idState').val('$! {state}');
</script>

もう一つの方法は、デフォルトのチェックボックスを設定することです
コピーコード
コードは以下の通りです。

<SELECT id="idState" style="width:150" name="state" value="$! {state}">
<OPTION value="">all</OPTION>
<OPTION value="1">Pass</OPTION>
<OPTION value="2" SELECTED> end passed</OPTION>
<OPTION value="3">Pending</OPTION>
</SELECT>

VTLでの書き方は :
コピーコード
コードは以下の通りです。

<SELECT id="idState" style="width:150" name="state" value="$! {state}">
<OPTION value="">all</OPTION>
<OPTION #if($! {state} == 1) SELECTED #end value="1">Pass</OPTION>
<OPTION #if($! {state} == 2) SELECTED #end value="2">end pass</OPTION>
<OPTION #if($! {state} == 3) SELECTED #end value="3">Pending</OPTION>
</SELECT>

なお、Velocityは==比較するときに型依存なので、"1", "2", "3" という文字列と比較すると、常に "1", "2", "3" となり、常に false となることに注意。
速度における比較の問題点
速度については、比較、特に不等間隔比較(より大きい、より小さい)については、実装が難しいです。今、私はページ上のファイルサイズのカテゴリ(バイト、MB、GB)を表示したいので、それはファイルサイズを比較することを含む、それを達成するためのより良い方法があるかどうか尋ねてください。
例えば、以下のようなコードです。
コピーコード
コードは以下の通りです。

#if ($filesize > 1024 && $filesize < 1048567)
#set($ksize = $filesize%1024)
<div class="mlt">File Size: $ksize KB
#elseif ($filesize > 1048567 && $filesize < 1073731824)
#set($msize=$filesize%1048567)
<div class="mlt">File Size: $msize MB
#elseif ($filesize > 1073731824)
#($gsize=$filesize%1073731824)
<div class="mlt">File Size: $gsize GB
#else
<div class="mlt">File Size: $filesize Bytes
#end

コピーコード
コードは以下の通りです。

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