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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Multiple dropdown input

    Hello everyone,

    I am thinking of trying to make (read:copy/paste half the internet untill it works) a search option which works like this:

    on a page there are multiple dropdownmenu's in which people choose brand, make, type etc of products. I would like to take the input from these boxes and put them in an (invisible if possible) search box.

    So if people choose for example "Nike", "sport shoe" & "2008", the search box will be filled with "Nike sport shoe 2009"

    Is this possible? I'm fairly new at JavaScript, so if this is a real dumb question... Sorry!

    Thanks for any response!

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

    Lightbulb Consider this ...

    Is this what you have in mind?
    PHP Code:
    <html>
    <
    head>
    <
    title>Search Selections</title>
    <
    script type="text/javascript">
    /* This script and many more are available free online at
    The JavaScript Source!! http://javascript.internet.com
    Created by: Jay M. Rumsey, OD | http://www.nova.edu/~rumsey */

    // For question from: http://codingforums.com/showthread.php?t=148706

    function NewList(selObj,newObj) {
      var 
    selElem document.getElementById(selObj);
      var 
    selIndex selElem.selectedIndex;
      var 
    newElem document.getElementById(newObj);
      var 
    tmp '';
      
    newElem.options.length 0;
      for (var 
    i=0i<selElem.options.lengthi++) {
        
    tmp selElem.options[i].value;
        if (
    != selIndex) { newElem.options[newElem.options.length] = new Option(tmp,tmp); }
      }
    }

    function 
    ShowSelections() {
      
    alert(document.getElementById('SBox0').value
       
    +' '+document.getElementById('SBox1').value
       
    +' '+document.getElementById('SBox2').value);
    // replace alert with storage to hidden element (?) for searching purposes.
    }
    </script>
    </head>
    <body>

    <table>
      <tr>
        <td>
          <select id="SBox0" onclick="NewList('SBox0','SBox1')">
          <option value="Nike">Nike</option>
          <option value="Addis">Addis</option>
          <option value="Rockport">Rockport</option>
          <option value="Sport shoe">Sport shoe</option>
          <option value="Walking shoe">Walking shoe</option>
          <option value="Running shoe">Running shoe</option>
          <option value="2007">2007</option>
          <option value="2008">2008</option>
          <option value="2009">2009</option>
          </select>
        </td>
        <td>
          <select id="SBox1" onclick="NewList('SBox1','SBox2')">
          <option value=""></option>
          </select>
        </td>
        <td>
          <select id="SBox2">
          <option value=""></option>
          </select>
        </td>
      </tr>
    </table>
    <button onclick="ShowSelections()">Search</button>

    </body>
    </html> 
    List can be easily expanded.

    Good Luck!

  • Users who have thanked jmrker for this post:

    DMR1712 (09-13-2008)

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow that´s fast! I think I can really do something with this.

    I changed it just a bit, because i didn´t need (I think) the " onclick="NewList('SBox1','SBox2')" , because that made the menu's change, which I did not need. I deleted that and now it does what i wanted!
    I first have to create the page which it will be on, but when it's totally done I'll post the 'final' code which I used.

    Thanks again!

    DMR

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

    Smile

    What the 'NewList' function does is repeat all the values in the preceding selectbox except for the particular one previously chosen. This eliminates the possibility of duplicate entries in the search function that you said you wanted to create. I'll look forward to your final attempt.

    Anyway, you're most welcome.
    Glad I was able to help.
    Good Luck!

  • #5
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I changed it into:

    Code:
     <select id="SBox0"> 
          <option value="Nike">Nike</option> 
          <option value="Addis">Addis</option> 
          <option value="Rockport">Rockport</option> 
            </select> 
        </td> 
        <td> 
          <select id="SBox1"> 
          <option value="Sport shoe">Sport shoe</option> 
          <option value="Walking shoe">Walking shoe</option> 
          <option value="Running shoe">Running shoe</option>
          </select> 
        </td> 
        <td> 
          <select id="SBox2"> 
          <option value="2007">2007</option> 
          <option value="2008">2008</option> 
          <option value="2009">2009</option> 
          </select>
    that way the dropdowns are separated, so no duplicate entries are possible

    I'll let you know when I finish it, I have to make the other page first, but didn't think I'd get a response this fast!


  •  

    Posting Permissions

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