改變HTML下拉框SELECT選項的多種方法

2019-10-26 17:26:59

字體：大中小

來源：轉載

供稿：網友

提交表單后返回的HTML頁面重新渲染，SELECT控件的value和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>
</SELECT>

一種臨時的解決方案是在vm文件末尾加上一段腳本為下拉框賦值：

復制代碼

代碼如下:
<script>
$('#idState').val('$!{state}');
</script>

另一種方案是設置默認選中項：

復制代碼

代碼如下:
<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>
</SELECT>

用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>
</SELECT>

這里要注意的是：進行==比較時，Velocity是區分類型的，如果用字符串“1”、“2”、“3”比較會始終得到false。
velocity中比較的問題
對于velocity來說，比較尤其是涉及到不等比較（大于或者小于）都是比較難實現的。現在我想把頁面上的file size分類顯示（Bytes、MB、GB），于是就涉及到比較filesize大小的問題，請問一下目前有沒有比較好的辦法實現呢？
比如下面的代碼：

復制代碼

代碼如下:
#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

復制代碼

代碼如下:

上一篇：了解html頁面的渲染過程以備學習前端的性能優化

下一篇：iframe的src賦值問題(服務器端)