www.webdeveloper.com
Results 1 to 5 of 5

Thread: 2 dynamic select boxes

  1. #1
    Join Date
    Dec 2010
    Posts
    2

    2 dynamic select boxes

    Hey,
    the unobtrusive dynamic select boxes are working great.

    I just wonder if its possible make this script into 2 dynamic select boxes.

    Like make this script work with 2 dynamic selex boxed, I did try to enter a 3rd ID but dident get it to work.
    PHP Code:
    /* This script and many more are available free online at
    The JavaScript Source!! http://javascript.internet.com
    Created by: Bobby van der Sluis | http://www.bobbyvandersluis.com/ */
    // Details can be found at:
    // http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php

    function dynamicSelect(id1id2) {
         
    // Feature test to see if there is enough W3C DOM support
         
    if (document.getElementById && document.getElementsByTagName) {
              
    // Obtain references to both select boxes
              
    var sel1 document.getElementById(id1);
              var 
    sel2 document.getElementById(id2);
              
    // Clone the dynamic select box
              
    var clone = sel2.cloneNode(true);
              
    // Obtain references to all cloned options
              
    var clonedOptions = clone.getElementsByTagName("option");
              
    // Onload init: call a generic function to display the related options in the dynamic select box
              
    refreshDynamicSelectOptions(sel1sel2clonedOptions);
              
    // Onchange of the main select box: call a generic function to display the related options in the dynamic select box
              
    sel1.onchange = function() {
                   
    refreshDynamicSelectOptions(sel1sel2clonedOptions);
              };
         }
    }

    function 
    refreshDynamicSelectOptions(sel1sel2clonedOptions) {
         
    // Delete all options of the dynamic select box
         
    while (sel2.options.length) {
              
    sel2.remove(0);
         }
         
    // Create regular expression objects for "select" and the value of the selected option of the main select box as class names
         
    var pattern1 = /( |^)(select)( |$)/;
         var 
    pattern2 = new RegExp("( |^)(" sel1.options[sel1.selectedIndex].value ")( |$)");
         
    // Iterate through all cloned options
         
    for (var 0clonedOptions.lengthi++) {
              
    // If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
              
    if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
                   
    // Clone the option from the hidden option pool and append it to the dynamic select box
                   
    sel2.appendChild(clonedOptions[i].cloneNode(true));
              }
         }
    }

    // Multiple onload function created by: Simon Willison
    // http://simon.incutio.com/archive/2004/05/26/addLoadEvent
    function addLoadEvent(func) {
      var 
    oldonload window.onload;
      if (
    typeof window.onload != 'function') {
        
    window.onload func;
      } else {
        
    window.onload = function() {
          if (
    oldonload) {
            
    oldonload();
          }
          
    func();
        }
      }
    }

    // addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
    addLoadEvent(function() {
    dynamicSelect("pda-brand""pda-type");
    }); 
    And this is the select boxes I want it to work on
    PHP Code:
    <form>
            <
    div>
                    <
    select id="pda-brand">
                         <
    option value="select">Select PDA brand...</option>
                         <
    option value="dell">Dell</option>
                         <
    option value="hp">HP</option>
                         <
    option value="palmone">PalmOne</option>
                    </
    select>

                    <
    select id="pda-type">
                         <
    option class="select" value="select">Select PDA type...</option>
                         <
    option class="dell" value="aximx30">Axim X30</option>
                         <
    option class="dell" value="aximx50">Axim X50</option>
                         <
    option class="hp" value="ipaqhx2750">iPAQ hx2750</option>
                         <
    option class="hp" value="ipaqrx3715">iPAQ rx3715</option>
                         <
    option class="hp" value="ipaqrz1710">iPAQ rz1710</option>
                         <
    option class="palmone" value="tungstene2">Tungsten E2</option>
                         <
    option class="palmone" value="tungstent5">Tungsten T5</option>
                         <
    option class="palmone" value="zire72">Zire 72</option>
                    </
    select>

                    <
    select id="pda-type">
                         <
    option class="select" value="select">Select PDA type...</option>
                         <
    option class="dell" value="aximx30">Axim X30</option>
                         <
    option class="dell" value="aximx50">Axim X50</option>
                         <
    option class="hp" value="ipaqhx2750">iPAQ hx2750</option>
                         <
    option class="hp" value="ipaqrx3715">iPAQ rx3715</option>
                         <
    option class="hp" value="ipaqrz1710">iPAQ rz1710</option>
                         <
    option class="palmone" value="tungstene2">Tungsten E2</option>
                         <
    option class="palmone" value="tungstent5">Tungsten T5</option>
                         <
    option class="palmone" value="zire72">Zire 72</option>
                    </
    select>
            </
    div>
    </
    form
    Anyone know if this is possible or if its any other javascripts out thats allready made and can do it?

    Right now the 3rd select box works like it isent dynamic.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The original coder created a multiple dynamic select boxes script on his site: http://www.bobbyvandersluis.com/arti...ect/index.html

  3. #3
    Join Date
    Dec 2010
    Posts
    2
    Ye thats the script I'm using, but that script it for 2 select boxes, I want to use 3. The last 2 dynamic drop boxes will have the same info.

    Example:

    The first select box ask what games do you play
    you can choose from:
    -strategy
    -mmo
    -fps

    second select box, dynamic
    if strategy, you can select: starcraft 2, red alert 2, warcraft 3
    if mmo, you can select: wow, aion, aoc
    if fps, you can select: CSS, MW2, Black Ops

    third select box, dynamic
    if strategy, you can select: starcraft 2, red alert 2, warcraft 3
    if mmo, you can select: wow, aion, aoc
    if fps, you can select: CSS, MW2, Black Ops

    So basicly its just the same info in the second and the third dynamic select boxes. When I did try to enter a 3rd select box the 3rd box dident change because of what I did pick in the first, it just showed all 9 games at once.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Scroll to the bottom of the document for multiple boxes. example

  5. #5
    Join Date
    Jun 2010
    Posts
    65
    http://php-ajax-code.blogspot.com/20...es-cities.html

    Tutorial made for 3 dynamic drop downs, works pretty well I think.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles