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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple Dynamic Combo Boxes

    I downloaded this javascript for linking multiple dropdown list boxes. But i would like to change combo box 3 and 4 to text fields or just remove combo box 4 and jsut use 3 boxes, the 3rd one being a text field. The reason why is if i choose something in box 1 then box 2 changes to things related to whats selected in box 1. Whats chosen in box 2 sets box 3 text field to specific text that is set in the coding and is not a select box. I do not want box 3 to be a select box, only a text field that is not editable. Also the one other thing is, is there a way to have each box pull values based on an XML sheet because i have a ton of info that needs to go in it and i want something easily changeable or editable later. The link i was looking at is for somewhat f an example but needs to be edited is http://www.javascriptkit.com/script/...plecombo.shtml.

    My xml would be something like this. That way i can just edit the xml data and the lists and all will be updated automatically.

    <phonesystem>
    <Manufacturer>Avaya</Manaufacturer>
    <Model>G350</Model>
    <Description>Programming Notes Here Specific to G350</Description>
    </phonesystem>
    <phonesystem>
    <Manufacturer>Avaya</Manaufacturer>
    <Model>IP Office 500</Model>
    <Description>Programming Notes Here Specific to IP Office 500</Description>
    </phonesystem>
    <phonesystem>
    <Manufacturer>Toshiba</Manaufacturer>
    <Model>IStrata DK</Model>
    <Description>Programming Notes Here Specific to Strata DK</Description>
    </phonesystem>

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

    Consider this ...

    Here is a variation on the theme.
    See if you can modify it to your needs.
    Code:
    <html>
    <HEAD>
    <title>Dynamic Drop-Downs</title>
    
    <script type="text/javascript">
    /* This script and many more are available free online at
    The JavaScript Source!! http://javascript.internet.com
    Extensively Revised Again by: Jay Rumsey, OD  http://www.nova.edu/~rumsey
    Revised by: DeWayne Whitaker :: http://www.aecdfw.com
    Original by: Andrew Berry */
    
    var Land = ['Car:Chevy','Truck:Ford','Train:Passenger'];
    var Sea = ['Boat:Fishing','Submarine:Seawolf Class'];
    var Air = ['Plane:747','Ultralight:Kitfox','Glider:Schwietzer Glider'];
     
    function Populate(IDS,NextArrayName){
      var tmp = [];
      var sel = document.getElementById(IDS);
      sel.options.length=0;
      sel.options[0]=new Option('[SELECT]','',true,true);
      var Items = [];
      switch (NextArrayName.value) {
    	  case 'Land' : Items = Land; break;
    	  case 'Sea' : Items = Sea; break;
    	  case 'Air' : Items = Air; break;
    	  default: alert('Invalid entry: '+NextArrayName); break;
      }
      for (var z=0; z<Items.length; z++){
        if (Items[z]){
          tmp = Items[z].split(':');
          sel.options[sel.options.length]=new Option(tmp[0],tmp[1],true,true);
        }
      }
      sel.selectedIndex=0;
    }
    
    function ShowCurrentSelections() {  // for testing purposes only
      var str = 'Selections\n';
      var el = document.myForm.Choice1; 
      if (el.selectedIndex != -1) { str += el.options[el.selectedIndex].text + ' : '; }
          el = document.myForm.Choice2;
      if (el.selectedIndex != -1) { str += el.options[el.selectedIndex].text + ' : '; }
          el = document.myForm.Choice3;
          str += el.value;
      alert(str);
    }
    </script>
    </HEAD>
    <BODY>
    
    <form name="myForm" onsubmit="return false">
    <table align="center">
      <tr>
        <td>
          <select id="Choice1" name="Choice1" onchange="Populate('Choice2',this)">
            <option value="0">[SELECT]</option>
            <option value="Land">Land</option>
            <option value="Sea">Sea</option>
            <option value="Air">Air</option>
          </select>
        </td><td>
          <select id="Choice2" name="Choice2"
           onchange="document.getElementById('Choice3').value=this.value"></select>
        </td><td>
          <input type="text" id="Choice3" value="" readonly>
        </td>
      </tr>
    </table>
    <div style="text-align:center">
    <button onclick="ShowCurrentSelections();return false">Show Selections</button>
    </div>
    </form>
    
    <p><center>
    <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>
    </BODY>
    </html>
    Let me know if you need further comments.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well the problem i have is, 1. im not familiar with javascript very well and plus i have about 150 - 200 entries i have to do and i don't really want to have a script with a ton of variables or anything like that in it. I would like to do it in a way that is easy to add or delete entries as needed with out having to change the main javascript file or anything.

  • #4
    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 mjohnson24 View Post
    well the problem i have is, 1. im not familiar with javascript very well and plus i have about 150 - 200 entries i have to do and i don't really want to have a script with a ton of variables or anything like that in it. I would like to do it in a way that is easy to add or delete entries as needed with out having to change the main javascript file or anything.
    So post a sample (10-25) of the entries that you would like to display.
    Show what it is that you want to display in select1, select2 and the textbox.

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well 1 sample would be:
    select 1: Avaya (If this is chosen)
    select 2: based on selection of 'select1': G350, Partner, System 25, Etc
    select 3: Text like "Yes it does have MOH but needs to be programmed"

    Sample 2 for another product choice in select1 box
    select 1: Toshiba (If this is chosen)
    select 2: Strata DK, CKT, etc
    select 3; Yes it does have MOH and doesn't need to be programmed"

    ----

    Select 1 would consist of choices like avaya, lucent, at&t, toshiba, comdial, etc.
    Select 2 is based on what is chosen in select 1
    Select 3 is based on what is selected in select 2

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Consider using the below script:
    http://codingforums.com/showpost.php...5&postcount=24

    Since it takes a simple nested object structure to populate the lists, instead of returning XML you could return JSON, and use that to populate the lists...

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, Im not to familiar with any other coding than html and css. But to give an example of what im looking for, check out this link.
    http://www.easyonhold.com/adapters.php

    So basically, you select the phone type in the first box, the second box changes to show related makes and then a little bit of text or picture pops up on the right side where you see correct adapter at. I can view the php coding or anything to see how they are pulling the data in the second box but this is what im looking for.


  •  

    Posting Permissions

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