Multiple ways to change the SELECT options in an HTML drop-down box
|
After the form is submitted, the returned HTML page is re-rendered, and neither the value nor the selectedIndex attribute of the SELECT control can make the drop-down box retain the state before the form is submitted. Copy code The code is as follows:<SELECT id="idState" style="width:150" name="state" selectedIndex="$!{state}"> <OPTION value="">All</OPTION> <OPTION value="1">Pass</OPTION> <OPTION value="2">Not passed</OPTION> <OPTION value="3">Pending</OPTION> </SELECT> A temporary solution is to add a script at the end of the vm file to assign a value to the drop-down box : Copy code The code is as follows:<script> $('#idState').val('$!{state}'); </script> Another solution is to set a default selection : Copy code The code is as follows:<SELECT id="idState" style="width:150" name="state" value="$!{state}"> <OPTION value="">All</OPTION> <OPTION value="1">Pass</OPTION> <OPTION value="2" SELECTED>Not passed</OPTION> <OPTION value="3">Pending</OPTION> </SELECT> The VTL way of writing is : Copy code The code is as follows:<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">Not passed</OPTION> <OPTION #if($!{state} == 3) SELECTED #end value="3">To be processed</OPTION> </SELECT> It should be noted here that when performing == comparison, Velocity distinguishes between types. If you compare with the strings "1", "2", and "3", you will always get false. Comparison issues in velocity <br />For velocity, comparisons, especially those involving inequality comparisons (greater than or less than), are difficult to implement. Now I want to display the file size on the page in categories (Bytes, MB, GB), which involves the problem of comparing filesize sizes. Is there a better way to achieve this? For example, the following code: Copy code The code is as follows:#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 Copy code The code is as follows:<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> |
<<: Pagination Examples and Good Practices
>>: How to successfully retrieve VMware Esxi root password after forgetting it
Recommend
How to handle the tcp_mark_head_lost error reported by the Linux system
Problem Description Recently, a host reported the...
Tutorial on installing Tomcat server under Windows
1 Download and prepare First, we need to download...
Vue realizes dynamic progress bar effect
This article example shares the specific code of ...
Instance method for mysql string concatenation and setting null value
#String concatenation concat(s1,s2); concatenate ...
Detailed explanation of how Vue returns values to dynamically generate forms and submit data
Table of contents Main issues solved 1. The data ...
Solve the problem of HTML automatic formatting after saving in vscode
The version of vsCode has been updated in recent ...
Detailed explanation of JavaScript Reduce
Table of contents map filter some every findIndex...
CSS3 to achieve timeline effects
Recently, when I turned on my computer, I saw tha...
How to implement ansible automated installation and configuration of httpd in Linux system
1. Use ansible's playbook to automatically in...
JavaScript design pattern chain of responsibility pattern
Table of contents Overview Code Implementation Pa...
The difference between two MySQL delete user statements (delete user and drop user)
Tip: In MySQL, we often need to create and delete...
Provides helpful suggestions for improving website design
<br />Scientifically Design Your Website: 23...
Bootstrap realizes the effect of carousel
This article shares the specific code of Bootstra...
What are your principles for designing indexes? How to avoid index failure?
Table of contents Primary key index Create indexe...
Analysis and explanation of the differences between DIV, Table and XHTML website building
To put it simply, website construction is about &q...