...

View Full Version : Double Combo Script



tdprout
10-05-2012, 04:33 PM
How do you make the second box static and NOT expand or contract??

Here is the code:



<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/

var groups=document.doublecombo.category.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Sub Category")


group[1][0]=new Option("Portfolio")
group[1][1]=new Option("Pricing")
group[1][2]=new Option("Valuation")

group[2][0]=new Option("Claims")
group[2][1]=new Option("Financial Management")
group[2][2]=new Option("Funding")
group[2][3]=new Option("Internal Controls")
group[2][4]=new Option("Rent/Billing")

group[3][0]=new Option("Central Office")
group[3][1]=new Option("Conferences")

group[4][0]=new Option("Child Care")
group[4][1]=new Option("Concessions")
group[4][2]=new Option("Delegations")
group[4][3]=new Option("Directives Management")
group[4][4]=new Option("Historic Preservation")
group[4][5]=new Option("Records Management")
group[4][6]=new Option("Reimbursable Services")
group[4][7]=new Option("Sustainable Design")
group[4][8]=new Option("WorkPlace Programs")

group[5][0]=new Option("Customer Account Management")

group[6][0]=new Option("Accessibility")
group[6][1]=new Option("Art in Achitecture")
group[6][2]=new Option("Border Stations")
group[6][3]=new Option("Building Information Modeling")
group[6][4]=new Option("Courthouse Program")
group[6][5]=new Option("Design Criteria and Guidelines")
group[6][6]=new Option("Design Excellence")
group[6][7]=new Option("Facilities Standards")
group[6][8]=new Option("Fire Protection/Life Safety")
group[6][9]=new Option("Project Development")
group[6][10]=new Option("Project Management")
group[6][11]=new Option("Repairs and Alterations")
group[6][12]=new Option("Security")
group[6][13]=new Option("Seismic")
group[6][14]=new Option("Urban Design")

group[7][0]=new Option("Disposal")



group[8][0]=new Option("Business Planning &amp; Improvement")
group[8][1]=new Option("Communications/Branding")
group[8][2]=new Option("External Relations and Inquires")
group[8][3]=new Option("Correspondence Management")
group[8][4]=new Option("Information Technology")
group[8][5]=new Option("Management Controls")
group[8][6]=new Option("Occupation Safety and Health")
group[8][7]=new Option("Telework")

group[9][0]=new Option("Procurement")
group[9][1]=new Option("Procurement Instructional Bullentins")

group[10][0]=new Option("Assignment & Utilization of Space")
group[10][1]=new Option("Lease Administration/Lease Policy")
group[10][2]=new Option("Occupancy Services")
group[10][3]=new Option("Site Acquisition")


group[11][0]=new Option("Building Operations, Maintenance and Cleaning")
group[11][1]=new Option("Emergency Preparedness")
group[11][2]=new Option("Enviroment")
group[11][3]=new Option("Fire Protection/Life Safety")
group[11][4]=new Option("Health")
group[11][5]=new Option("Lease Administration")
group[11][6]=new Option("Naming Buildings")
group[11][7]=new Option("Occasional Use of Public Space")
group[11][8]=new Option("Recycling")
group[11][9]=new Option("Repairs and Alterations")
group[11][10]=new Option("Security")





var temp=document.doublecombo.subcategory

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>

jmrker
10-05-2012, 05:12 PM
Where is the HTML set-up code to execute the JS provided?

Also, that is quite old code. Do you really want to do it that way?

tdprout
10-05-2012, 06:12 PM
Yeah I know it's old....lol here is the html associated with it:





<form name="doublecombo" action="" method="POST">

<table border="1" cellpadding="10px" bgcolor="#CCCCCC">

<tr><td> <label for="status">Find in:</label>

<label for="current">
<input class="radio_style" id="current" checked="checked" name="status" type="radio" value="current">
Current
</label>

<label for="obsolete">
<input class="radio_style" id="obsolete" name="status" type="radio" value="obsolete">
Obsolete
</label>

<label for="both">
<input class="radio_style" id="both" name="status" type="radio" value="both">
Both
</label></td></tr>

<br />


<tr><td>
<label for="Category">By category:</label>
<select name="category" size="1" onChange="redirect(this.options.selectedIndex)">
<option value="null">Category</option>
<option value="asset management">Asset Management</option>
<option value="budget">Budget/Finance</option>
<option value="central office">Central Office</option>
<option value="client services/programs">Client Services/Programs</option>
<option value="cam">Customer Account Management</option>
<option value="dc">Design & Construction</option>
<option name="disposal" value="disposal">Disposal</option>
<option value="orm">Organization/Resource Management</option>
<option value="Procurement/Contracting">Procurement/Contracting</option>
<option value="real property acquisition">Real Property Acquisition</option>
<option value="real property management/lease administration">Real Property Management/Lease Administration</option>


</select>





<select name="subcategory" size="1">
<option value="null">Sub-Category</option>
<option value="Portfolio">Portfolio</option>
<option value="Pricing">Pricing</option>
<option value="Valuation">Valuation</option>

<option value="Claims">Claims</option>
<option value="Financial Management">Financial Managementt</option>
<option value="Funding">Funding</option>
<option value="Internal Controls">Internal Controls</option>
<option value="Rent/Billling">Rent/Billling</option>

<option value="Central Office">Central Office</option>
<option value="Conferences">Conferences</option>

<option value="Child Care">Child Care</option>
<option value="Concessions">Concessions</option>
<option value="Delegations">Delegations</option>
<option value="Directives Management">Directives Management</option>
<option value="Historic Preservation">Historic Preservation</option>
<option value="Records Management">Records Management</option>
<option value="Reimbursable Services">Reimbursable Services</option>
<option value="Sustainable Design">Sustainable Design</option>
<option value="WorkPlace Programs">WorkPlace Programs</option>

<option value="Customer Account Management">Customer Account Management</option>
<option value="Accessibility">Accessibility</option>
<option value="Art in Architecture">Art in Architecture</option>
<option value="Border Stations">Border Stations</option>
<option value="Building Information Modeling">Building Information Modeling</option>
<option value="Courthouse Program">Courthouse Program</option>
<option value="Design Criteria and Guidelines">Design Criteria and Guidelines</option>
<option value="Design Excellence">Design Excellence</option>
<option value="Facilities Standards">Facilities Standards</option>
<option value="Fire Protection/Life Safety">Fire Protection/Life Safety</option>
<option value="Project Development">Project Development</option>
<option value="Project Management">Project Management</option>
<option value="Repairs and Alterations">Repairs and Alterations</option>
<option value="Security">Security</option>
<option value="Seismic">Seismic</option>
<option value="Urban Design">Urban Designt</option>

<option id="disposal" value="Disposal">Disposal</option>

<option value="Business Planning & Improvement">Business Planning & Improvement</option>
<option value="Communications/Branding">Communications/Branding</option>
<option value="External Relations and Inquiries">External Relations and Inquiries</option>
<option value="Correspondence Management">Correspondence Management</option>
<option value="Information Technology">Information Technology</option>
<option value="Management Controls">Management Controls</option>
<option value="Occupation Safety and Health">Occupation Safety and Health</option>
<option value="Telework">Telework</option>


<option value="Procurement">Procurement</option>
<option value="Procurement Instructional Bulletins">Procurement Instructional Bulletins</option>

<option value="Assignment & Utilization of Space">Assignment & Utilization of Space</option>
<option value="Lease Administration/Lease Policy">Lease Administration/Lease Policy</option>
<option value="Occupancy Services">Occupancy Services</option>
<option value="Site Acquisition">Site Acquisition</option>

<option value="Building Operations, Maintenance and Cleaning">Building Operations, Maintenance and Cleaning</option>
<option value="Emergency Preparedness">Emergency Preparedness</option>
<option value="Energy and Utilities">Energy and Utilities</option>
<option value="Enviroment">Enviroment</option>
<option value="Fire Protection/Life Safety">Fire Protection/Life Safety</option>
<option value="Health">Healtht</option>
<option value="Lease Administration">Lease Administration</option>
<option value="Naming Buildings">Naming Buildings</option>
<option value="Occasional Use of Public Space">Occasional Use of Public Space</option>
<option value="Recycling">Recycling</option>
<option value="Repairs and Alterations">Repairs and Alterations</option>
<option value="Security">Security</option>





</select>
<input name="submitted" class="button" type="submit" value="GO"></td></tr>

<br />








<tr><td>
By term:

<input type="text" name="find" placeholder="Search Term" />

<Select NAME="field">
<Option id="searchon" VALUE="null">Search On</option>
<Option id="title" VALUE="title">Title</option>
<Option id="poc" VALUE="poc">POC</option>
<Option id="purpose" VALUE="purpose">Purpose</option>

</Select>

<input type="hidden" name="searching" value="yes" />





<input name="submitted" class="button" type="submit" value="GO"></td></tr>

</form>

</table>

jmrker
10-05-2012, 07:26 PM
How do you make the second box static and NOT expand or contract??

Here is the code:



...


What do you mean by "static"? :confused:
The select box, buy design, is supposed to expand to display choices available
and contract when a selection is chosen.

What are you trying to accomplish?
My guess is that you want to put the options into a <div> area and turn the scrolling option to auto after defining the size of the display. Just a SWAG.

Possibly something like this?


<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<style type="text/css")>
#subcategory {
height:3em; width:25em; /* height could also be 1em */
border:1px solid blue;
cursor:pointer;
overflow:auto;
}
</style>

</head>
<body>
<h2>Sub-Category</h2>
<div id="subcategory" name="subcategory")>
<li onclick="alert('Portfolio')">Portfolio</li>
<li onclick="alert('Pricing')">Pricing</li>
<li onclick="alert('Valuation')">Valuation</li>

<li onclick="alert('Claims')">Claims</li>
<li onclick="alert('Financial Management')">Financial Managementt</li>
<li onclick="alert('Funding')">Funding</li>
<li onclick="alert('Internal Controls')">Internal Controls</li>
<li onclick="alert('Rent/Billling')">Rent/Billling</li>

<li onclick="alert('Central Office')">Central Office</li>
<li onclick="alert('Conferences')">Conferences</li>

<li onclick="alert('Child Care')">Child Care</li>
<li onclick="alert('Concessions')">Concessions</li>
<li onclick="alert('Delegations')">Delegations</li>
<li onclick="alert('Directives Management')">Directives Management</li>
<li onclick="alert('Historic Preservation')">Historic Preservation</li>
<li onclick="alert('Records Management')">Records Management</li>
<li onclick="alert('Reimbursable Services')">Reimbursable Services</li>
<li onclick="alert('Sustainable Design')">Sustainable Design</li>
<li onclick="alert('WorkPlace Programs')">WorkPlace Programs</li>

<li onclick="alert('Customer Account Management')">Customer Account Management</li>
<li onclick="alert('Accessibility')">Accessibility</li>
<li onclick="alert('Art in Architecture')">Art in Architecture</li>
<li onclick="alert('Border Stations')">Border Stations</li>
<li onclick="alert('Building Information Modeling')">Building Information Modeling</li>
<li onclick="alert('Courthouse Program')">Courthouse Program</li>
<li onclick="alert('Design Criteria and Guidelines')">Design Criteria and Guidelines</li>
<li onclick="alert('Design Excellence')">Design Excellence</li>
<li onclick="alert('Facilities Standards')">Facilities Standards</li>
<li onclick="alert('Fire Protection/Life Safety')">Fire Protection/Life Safety</li>
<li onclick="alert('Project Development')">Project Development</li>
<li onclick="alert('Project Management')">Project Management</li>
<li onclick="alert('Repairs and Alterations')">Repairs and Alterations</li>
<li onclick="alert('Security')">Security</li>
<li onclick="alert('Seismic')">Seismic</li>
<li onclick="alert('Urban Design')">Urban Designt</li>

<li id="disposal" onclick="alert('Disposal')">Disposal</li>

<li onclick="alert('Business Planning & Improvement')">Business Planning & Improvement</li>
<li onclick="alert('Communications/Branding')">Communications/Branding</li>
<li onclick="alert('External Relations and Inquiries')">External Relations and Inquiries</li>
<li onclick="alert('Correspondence Management')">Correspondence Management</li>
<li onclick="alert('Information Technology')">Information Technology</li>
<li onclick="alert('Management Controls')">Management Controls</li>
<li onclick="alert('Occupation Safety and Health')">Occupation Safety and Health</li>
<li onclick="alert('Telework')">Telework</li>


<li onclick="alert('Procurement')">Procurement</li>
<li onclick="alert('Procurement Instructional Bulletins')">Procurement Instructional Bulletins</li>

<li onclick="alert('Assignment & Utilization of Space')">Assignment & Utilization of Space</li>
<li onclick="alert('Lease Administration/Lease Policy')">Lease Administration/Lease Policy</li>
<li onclick="alert('Occupancy Services')">Occupancy Services</li>
<li onclick="alert('Site Acquisition')">Site Acquisition</li>

<li onclick="alert('Building Operations, Maintenance and Cleaning')">Building Operations, Maintenance and Cleaning</li>
<li onclick="alert('Emergency Preparedness')">Emergency Preparedness</li>
<li onclick="alert('Energy and Utilities')">Energy and Utilities</li>
<li onclick="alert('Enviroment')">Enviroment</li>
<li onclick="alert('Fire Protection/Life Safety')">Fire Protection/Life Safety</li>
<li onclick="alert('Health')">Healtht</li>
<li onclick="alert('Lease Administration')">Lease Administration</li>
<li onclick="alert('Naming Buildings')">Naming Buildings</li>
<li onclick="alert('Occasional Use of Public Space')">Occasional Use of Public Space</li>
<li onclick="alert('Recycling')">Recycling</li>
<li onclick="alert('Repairs and Alterations')">Repairs and Alterations</li>
<li onclick="alert('Security')">Security</li>

</div>
</body>
</html>

Old Pedant
10-05-2012, 08:24 PM
I think possibly he is just referring to the WIDTH of the <select>s. By default, they change to match the width of the widest text in any <option>.

But you can easily override that by putting a width in the style of the <select>:


<select style="width: 200px;" ...>

(or, of course, use a CSS class).

Now the width will stay the same regardless of text content. CAUTION: It means that you may not be showing ALL the text. It really does cut the width off at what you specify.

jmrker
10-05-2012, 09:50 PM
I think possibly he is just referring to the WIDTH of the <select>s. By default, they change to match the width of the widest text in any <option>.

But you can easily override that by putting a width in the style of the <select>:


<select style="width: 200px;" ...>

(or, of course, use a CSS class).

Now the width will stay the same regardless of text content. CAUTION: It means that you may not be showing ALL the text. It really does cut the width off at what you specify.

Well, it was a SWAG. I never was a very good guesser!
:eek: :D :thumbsup:

tdprout
10-09-2012, 04:33 PM
Thanks guys..fixed

jmrker
10-09-2012, 04:51 PM
Thanks guys..fixed

So what was the real problem and which solution fixed it?

tdprout
10-10-2012, 07:39 PM
I didn't want the second box to expand to display choices available....so just added

width="300" style="width: 300px"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum