By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,426 Members | 1,729 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,426 IT Pros & Developers. It's quick & easy.

Need multi select combo/list box on ASP page

P: 20
Hi,

I need a multi select combo box on ASP page.

Scenario: on page there is a table with few columns. In multi select box, i need all the table columns,let user select a few, and show only those columns in the table which user has selected.
Feb 19 '10 #1
Share this Question
Share on Google+
7 Replies


CroCrew
Expert 100+
P: 563
Hello usr123,

What have you coded so far? Please post what you have so far so we can provide you with the assistance you’re looking for.

Happy Coding,
CroCrew~
Feb 19 '10 #2

P: 20
This shows the columns.

Expand|Select|Wrap|Line Numbers
  1. <td height="20" id= "tcol1"><b><a href="live.asp?sort=old_wkctr&filter_wo=<%=request("filter_wo")%>&filter_column=<%=request("filter_column")%>&filter_op=<%=request("filter_op")%>&filter_part=<%=request("filter_part")%>&filter_type=<%=request("filter_type")%>&filter_wkctr=<%=request("filter_wkctr")%>&filter_dept=<%=request("filter_dept")%>&filter_000=<%=show_000%>&w=<%=filter_w%>&q=<%=filter_q%>&Prelim=<%=filter_Prelim%>">W/C</a></b></td>
  2.           <td height="20" id= "tcol2"><b><a href="live.asp?sort=old_job&filter_wo=<%=request("filter_wo")%>&filter_op=<%=request("filter_op")%>&filter_part=<%=request("filter_part")%>&filter_type=<%=request("filter_type")%>&filter_wkctr=<%=request("filter_wkctr")%>&filter_dept=<%=request("filter_dept")%>&filter_000=<%=show_000%>&w=<%=filter_w%>&q=<%=filter_q%>&Prelim=<%=filter_Prelim%>">W/O</a></b></td>
  3.           <td height="20" id= "tcol3"><b><a href="live.asp?sort=old_part&filter_wo=<%=request("filter_wo")%>&filter_op=<%=request("filter_op")%>&filter_part=<%=request("filter_part")%>&filter_type=<%=request("filter_type")%>&filter_wkctr=<%=request("filter_wkctr")%>&filter_dept=<%=request("filter_dept")%>&filter_000=<%=show_000%>&w=<%=filter_w%>&q=<%=filter_q%>&Prelim=<%=filter_Prelim%>">Part</a></b></td>
  4.           <td height="20" id= "tcol4"><b>Description</b></td>



Data for these columns is:

Expand|Select|Wrap|Line Numbers
  1. <td bgcolor="#FFFFFF" width="7%"><%=oRS("old_wkctr")%></td>
  2.         <td bgcolor="#FFFFFF" nowrap><a title="<%=oRS("commentary")%>" href="javascript: popup_small('edit_commentary.asp?work_order=<%=oRS("old_job")%>&commentary=<%=oRS("commentary")%>')"><%=oRS("old_job")%></a> </td>
  3.         <td bgcolor="#FFFFFF" nowrap><%=oRS("old_part")%></td>
  4.         <td bgcolor="#FFFFFF" width="8%"><%=oRS("pt_desc1")%></td>
Feb 19 '10 #3

P: 20
i have got multi select check boxes:

Expand|Select|Wrap|Line Numbers
  1. <tr>
  2.             <td>
  3.                 <input type="checkbox" name="W/C" onclick="toggleVis(this.name)" checked>W/C<input type="checkbox" name="W/O" onclick="toggleVis(this.name)" checked>W/O
  4.                 <input type="checkbox" name="Part" onclick="toggleVis(this.name)" checked>Part<input type="checkbox" name="Description" onclick="toggleVis(this.name)" checked>Description
  5.             </td>
  6.           </tr> 
Or i can have something like:

Expand|Select|Wrap|Line Numbers
  1. <tr> 
  2.            <td width="20%" colspan="2">
  3.               <select name="filter_type" class="form_textbox" multiple = "multiple" size ="5" >
  4.                 <option value="">-Please choose-</option>
  5.                 <option value="old_wkctr" <%if request("filter_column") = "old_wkctr" then%>selected<%end if%>>W/C</option>
  6.                 <option value="commentary" <%if request("filter_column") = "commentary" then%>selected<%end if%>>W/O</option>
  7.                 <option value="old_part" <%if request("filter_column") = "old_part" then%>selected<%end if%>>Part</option>
  8.                 <option value="pt_desc1" <%if request("filter_column") = "pt_desc1" then%>selected<%end if%>>Op</option>          
  9.               </select>
  10.             </td>
  11.           </tr>
In either option, i need to check at column level if its checked(in case of checkboxes) or selected(in case of Multi select combo), i couldnt figure out so far how to do that....
Feb 19 '10 #4

P: 20
If its selected or if its checked, i need to make visible true or false.
Feb 19 '10 #5

CroCrew
Expert 100+
P: 563
What exactly do you need to make visible or not?
Feb 19 '10 #6

P: 20
The columns:
Expand|Select|Wrap|Line Numbers
  1. <td height="20" id= "tcol1"><b><a href="live.asp?sort=old_wkctr&filter_wo=<%=request("filter_wo")%>&filter_column=<%=request("filter_column")%>&filter_op=<%=request("filter_op")%>&filter_part=<%=request("filter_part")%>&filter_type=<%=request("filter_type")%>&filter_wkctr=<%=request("filter_wkctr")%>&filter_dept=<%=request("filter_dept")%>&filter_000=<%=show_000%>&w=<%=filter_w%>&q=<%=filter_q%>&Prelim=<%=filter_Prelim%>">W/C</a></b></td> 
  2.           <td height="20" id= "tcol2"><b><a href="live.asp?sort=old_job&filter_wo=<%=request("filter_wo")%>&filter_op=<%=request("filter_op")%>&filter_part=<%=request("filter_part")%>&filter_type=<%=request("filter_type")%>&filter_wkctr=<%=request("filter_wkctr")%>&filter_dept=<%=request("filter_dept")%>&filter_000=<%=show_000%>&w=<%=filter_w%>&q=<%=filter_q%>&Prelim=<%=filter_Prelim%>">W/O</a></b></td> 
  3.           <td height="20" id= "tcol3"><b><a href="live.asp?sort=old_part&filter_wo=<%=request("filter_wo")%>&filter_op=<%=request("filter_op")%>&filter_part=<%=request("filter_part")%>&filter_type=<%=request("filter_type")%>&filter_wkctr=<%=request("filter_wkctr")%>&filter_dept=<%=request("filter_dept")%>&filter_000=<%=show_000%>&w=<%=filter_w%>&q=<%=filter_q%>&Prelim=<%=filter_Prelim%>">Part</a></b></td> 
  4.           <td height="20" id= "tcol4"><b>Description</b></td> 
For example: If 'W/C' is selected or checked, it should be visible otherwise not.
Feb 19 '10 #7

CroCrew
Expert 100+
P: 563
Ok, here is an example of what you can do using JavaScript. First let me give some insight on what the page does and then the code.

Function:
ShowHideColumn (CommonFieldNamePart, MaxRowNum, obj)

Definition:
{CommonFieldNamePart} is the beginning part of the “name” that is shared by all of the fields/columns that this function will be updating.
{MaxRowNum} is number of fields that this function will be updating. If there are three rows in the table then you would pass ‘3’ for the “MaxRowNum” value.
{obj} Just always pass “this.name“ as the value. In the checkbox properties make sure that the “name” value of the check box is the same as the “CommonFieldNamePart” value.

Note:
For this function to work properly an understanding that all the Columns that are going to be grouped together will need to share in a common name part for each row.

Here is a example of the whole page at work:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <script type="text/javascript">
  5.             function ShowHideColumn(CommonFieldNamePart, MaxRowNum, obj)
  6.             {
  7.                 for (i = 1; i <= MaxRowNum; i++)
  8.                 {
  9.                     if (document.getElementById(obj).checked)
  10.                     {
  11.                         document.getElementById(CommonFieldNamePart + i).style.display='none';
  12.                     }
  13.                     else
  14.                     {
  15.                         document.getElementById(CommonFieldNamePart + i).style.display='';
  16.                     }
  17.                 }
  18.             }
  19.         </script>        
  20.     </head>
  21.     <body>
  22.         <p>
  23.             Hide Column A: <input type="checkbox" name="ColumnA" onclick="ShowHideColumn('ColumnA', 2, this.name)"><br />
  24.             Hide Column B: <input type="checkbox" name="ColumnB" onclick="ShowHideColumn('ColumnB', 2, this.name)"><br />
  25.             Hide Column C: <input type="checkbox" name="ColumnC" onclick="ShowHideColumn('ColumnC', 2, this.name)"><br />
  26.             Hide Column D: <input type="checkbox" name="ColumnD" onclick="ShowHideColumn('ColumnD', 2, this.name)">
  27.         </p>
  28.  
  29.         <table border="1" bordercolor="#000000">
  30.             <tr>
  31.                 <td id="ColumnA1">Dane</td>
  32.                 <td id="ColumnB1">Sam</td>
  33.                 <td id="ColumnC1">Ed</td>
  34.                 <td id="ColumnD1">Bill</td>
  35.             </tr>
  36.             <tr>
  37.                 <td id="ColumnA2">Jurkovic</td>
  38.                 <td id="ColumnB2">Dawwod</td>
  39.                 <td id="ColumnC2">Kodish</td>
  40.                 <td id="ColumnD2">Chasse’</td>
  41.             </tr>
  42.         </table>
  43.     </body>
  44. </html>
  45.  
Hope this helps,
CroCrew~
Feb 19 '10 #8

Post your reply

Sign in to post your reply or Sign up for a free account.