Create a corresponding Lenovo query for a large drop-down menu of data volumes

Source: Internet
Author: User

* Effect: "The drop-down menu for project information on the left, with an input box on the right." To achieve the effect on the right of the input box position, enter "a", in the drop-down box yesterday the value of the message "a" to display the corresponding information "


* Function Realization:

"JSP page feature implementation:"

Get all the project information you want

<%list project_list = (List) request.getattribute ("Project_list");%>
JS assembled into an array of information

<script language= "JavaScript" >//all the project information into the array. var array_pro = new Array (); <s:set name= "Proorder" value= "0"/ ><s:iterator value= "#request. Project_list" >array_pro[' <s:property value= "#proOrder"/> ']=new Array ( ' <s:property value= ' pro_id '/> ', ' <s:property value= ' pro_name '/> '); <s:set name= "ProOrder" value= "# Proorder+1 "></s:set></s:iterator>function getList (proname) {if (Proname! = ' && proname! = ')     Please enter the project name ') {var new_proarry = new Array (); var regu = Proname;   var re = new RegExp (Regu);      var new_order=0;    for (Var i=0;i<array_pro.length;i++) {if (Array_pro[i][1].search (re)!=-1) {new_proarry[new_order]=array_pro[i];       new_order=new_order+1; }}var str_pro= ""; $ ("Select[id= ' pro_id '" option "). Remove (); if (new_proarry.length==0) {str_pro=" <option value=\ "\ ">--Please select Project--</option>"; $ (' #PRO_ID '). Append (Str_pro); return false;} for (var i = 0; i < new_proarry.length; i++) {str_pro+= "<option value=" + New_proarry[i][0]+ ">" +new_proarry[i][1]+ "</option>";} $ (' #PRO_ID '). Append (Str_pro);} else{new_proarry=array_pro;$ ("select[id= ' pro_id ')" option "). Remove (); var str_pro=" <option value=\ "\" >-- Please select item--</option> "; for (var i = 0; i < new_proarry.length; i++) {str_pro+=" <option value= "+ new_proarry[i][0]+ ">" +new_proarry[i][1]+ "</option>";} $ (' #PRO_ID '). Append (Str_pro);}} </script>
Page Show content:

<tr class= "Fontsy" >               <td height= "" "align=" center "><font color=" Red ">*</font> project name </ td>        <td  height= "" "align=" left ">           <s:select list=" #request. Project_list "listkey="  pro_id "  listvalue=" Pro_name "  theme=" simple "  name=" pro_id "  id=" pro_id "  headerkey=" "  Headervalue= "--Please select the project--"  cssstyle= "width:300px;" /><input value= "Please enter the project name" onclick= "if (this.value== ' Please enter project name ') this.value= '"         onblur= "if (this.value==") This.value= ' Please enter the        project name '; Style= "border:none;width:100px;color:red;" onkeyup= "getList (this.value);" >        </td>        </td>
</tr>
The background action simply implements a simple full query, then saves it and then calls the foreground, which is not written here.


Create a corresponding Lenovo query for a large drop-down menu of data volumes

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.