Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Double Combo Script

    How do you make the second box static and NOT expand or contract??

    Here is the code:

    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>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts
    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?

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yeah I know it's old....lol here is the html associated with it:

    Code:
    
    <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>

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by tdprout View Post
    How do you make the second box static and NOT expand or contract??

    Here is the code:

    Code:
    ...
    What do you mean by "static"?
    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?
    Code:
    <!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>
    Last edited by jmrker; 10-05-2012 at 08:01 PM. Reason: Fixed syntax

  • Users who have thanked jmrker for this post:

    tdprout (10-09-2012)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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>:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    tdprout (10-09-2012)

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by Old Pedant View Post
    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>:
    Code:
    <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!

  • #7
    New Coder
    Join Date
    Aug 2008
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks guys..fixed
    Last edited by tdprout; 10-09-2012 at 04:46 PM.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by tdprout View Post
    Thanks guys..fixed
    So what was the real problem and which solution fixed it?

  • #9
    New Coder
    Join Date
    Aug 2008
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I didn't want the second box to expand to display choices available....so just added
    Code:
    width="300" style="width: 300px"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •