www.webdeveloper.com
Results 1 to 10 of 10

Thread: 2 selects for one option?

  1. #1
    Join Date
    May 2011
    Posts
    7

    2 selects for one option?

    I'm not sure quite how to word this. But if I use select for options 1 - 9, it will show the picture I choose based on which option I pick. But I'm using javascript to display a picture based on a color choice. The problem is that there's 13 colors which means over 150 color combinations. I would like to use one drop down for a primary color and then another drop down for a secondary color. This would alleviate the need for a 150+ option drop down. But how would I code this?

    thanks in advance. hecklers and newb bashers move on please.

  2. #2
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    make a multidimensional array to contain the image information, then use selectedIndex when changing the image:
    PHP Code:
    var image_info = new Array(
    new Array(
    "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //01
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //02
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //03
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //04
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //05
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //06
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //07
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //08
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //09
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //10
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //11
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //12
    new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"), //13
    ); 
    PHP Code:
    var index_color   document.getElementById('dropdown_color').selectedIndex;
    var 
    index_options document.getElementById('dropdown_options').selectedIndex;
    document.getElementById('image_element_id').src image_info[index_color][index_options]; 
    Computer programmer / web developer.

  3. #3
    Join Date
    May 2011
    Posts
    7
    i definitely feel like a super noob here. I have zero experience with PHP and only a few hours, really, with javascript. Thanks a lot for actually posting the code. very cool of you. If you could point me in the next direction, that'd be awesome. and if not, well that's awesome too. thanks.

  4. #4
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    The above was all javascript.

    Basically I made an array of arrays. Each sub-array, if you will, contained strings which were relative paths to images. For each of 13 colors, there is an array of images for each of 9 options.

    index_color and index_options contain the indices of the currently selected items in the select elements found by the two getElementById() calls. By then finding our img element, we can thus set it's src attribute to be equal to an array element based upon the selected indices.

    If you're new to Javascript, look up some Javascript tutorials on performing tasks; it helps the learning process to see scripts in action in good ways.
    For example, to figure out how images' src attribute can be changed, you merely need an example of what is called an image flip. These are normally done by mouseover and mouseout events, but can be done using links, buttons, timers, etc.; in this manner you can make gallerys, slideshows, navigation menus, eyecandy, and whatever you need.
    Last edited by savvykms; 06-21-2011 at 09:32 PM.
    Computer programmer / web developer.

  5. #5
    Join Date
    May 2011
    Posts
    7
    well, i've done some tutorials and frankly, i'm still confused. let's say there are just 4 colors:

    black, white, red, blue.

    I know I can create an array:

    var color1 = ("black", "white", "red", "blue")

    and another one...

    var color2 =("black", "white", "red", "blue")

    and some how combine these arrays in a way that javascript can pull color1 + color2 + ".jpg" to see the resulting picture as a combination of the two dropdowns. I saw your array and tried my best to put it into action, but I kept getting the same syntax error, plus i'm not quite sure how to add the html in.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Test</title>

    <
    script language="Javascript">
        function 
    jsDropDown(imgidtestnewimg) {
            
    document.getElementById(imgid).src "file:///C|/" test "/" newimg ".jpg";}
    </script>
    </head>

    <body>
    <div>
    <div>
    Base Color:
    <select name="test" onChange="jsDropDown('cful', 'test', this.value)">
    <option value="blackhotpink">Black & Hot Pink</option>

    <option value="blacklavender">Black & Lavender</option>
    <option value="blackpeach">Black & Peach</option>
    <option value="blackred">Black & Red</option>
    </select></ br>
    </div>
    <div>
    Base Color:
    <select name="test" onChange="jsDropDown('cful', 'test', this.value)">
    <option value="blackhotpink">Black & Hot Pink</option>

    <option value="blacklavender">Black & Lavender</option>
    <option value="blackpeach">Black & Peach</option>
    <option value="blackred">Black & Red</option>
    </select></ br>
    </div>
    <div>
    <img src="file:///C|/test/blackhotpink.jpg" width="750" height="600" id="cful" />
    </div>
    </div>
    </body>
    </html> 
    that is what I used before. That was prior to asking my question and your answer. I'm trying to mix something like that together. But I have 13 to 15 colors and simply typing out all of those picture names seems like extra work.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb Something to consider ...

    You did not supply the color image files (or a link to them)
    so this is just a sample of how they could be chosen.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=247930
    
    var FGcolors = ['FG color','Black','White','Red','Green','Blue'];
    var BGcolors = ['BG color','Black','White','Red','Green','Blue'];
    
    function populate(objID,tarr){
      var obj = document.getElementById(objID);
      obj.options.length = 0;
      for( i=0; i < tarr.length; i++) {
        obj.options[obj.options.length] = new Option(tarr[i],tarr[i],false,false);
      }
    }
    function showCombo() {
      var FG = document.getElementById('SBoxFG').value;
      if (FG == 'Pick color') { return; }
      var BG = document.getElementById('SBoxBG').value;
      if (BG == 'Pick color') { return; }
    //  alert('Combo chosen: '+FG+BG+'.jpg');
      document.getElementById('colorCombos').style.backgroundColor=BG;
      document.getElementById('colorCombos').style.color=FG;
      document.getElementById('colorCombos').innerHTML = FG+BG+'.jpg';
    }
    window.onload = function() {
      populate('SBoxFG',FGcolors);
      populate('SBoxBG',BGcolors);
    }
    </script>
    
    </head>
    <body>
    
    <select id="SBoxFG" onchange="showCombo()"></select>
    <select id="SBoxBG" onchange="showCombo()"></select>
    <div id="colorCombos" style="height:100px; width:200px; border:1px solid black">
    Here is where image would be displayed.</div>
    </body>
    </html>

  7. #7
    Join Date
    May 2011
    Posts
    7
    wow, thanks for all of that work. i did try your code and modified it to include the pictures, but it's still not working. And when I try to modify the colors, it gives me a syntax error. I just used those 4 colors as an example. There's 157 different color options (pictures) and there's like 14 colors:

    black
    hot pink
    lavender
    light blue
    lime
    orange
    peach
    red
    turquoise
    yellow
    and zebra.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Exclamation

    Quote Originally Posted by jdaydizzle92284 View Post
    wow, thanks for all of that work. i did try your code and modified it to include the pictures, but it's still not working. And when I try to modify the colors, it gives me a syntax error. I just used those 4 colors as an example. There's 157 different color options (pictures) and there's like 14 colors:

    black
    hot pink
    lavender
    light blue
    lime
    orange
    peach
    red
    turquoise
    yellow
    and zebra.
    I'm not very good at mind reading...
    Post your code that is not working
    and/or a link to some of the pictures so I can see what you are trying to do.

    Added note:
    Peach is not a color I can find. Send the equivalent color in #rrggbb notation for a more flexible solution.
    #000000 = black;
    #ffffff = white;
    #ff0000 = red
    #00ff00 = green
    #0000ff = blue
    #ffff00 = yellow
    etc.
    Last edited by JMRKER; 07-18-2011 at 03:04 PM.

  9. #9
    Join Date
    May 2011
    Posts
    7
    http://s1205.photobucket.com/albums/...dorieviolanti/

    that is a link of the flowers i was referring to. basically, i tried to change the colors in your code to the colors i listed before. You had in the code that upon selection of FGcolor and BGcolor it would be FGcolor + BGcolor + .jpg would show the picture. That's what i tried to do with adding a generic picture as the img src and setting that img as the id of "tarr". But it didn't work. I think there was some misunderstanding as far as the intent. You'll see in the link that the pictures are of different combination of products that use a FGcolor and BGcolor from the list i mentioned in my previous post.

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb See if this makes any sense to you ...

    I don't know if this displays all the image combinations, but you should be able to correct
    the FGcolors and BGcolors array elements to match the images you have.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=247930
    
    baseURL = 'http://s1205.photobucket.com/albums/bb429/dorieviolanti/th_';
    var FGcolors = ['FG color','zebra','yellow','turquoise','red','black'];
    var BGcolors = ['BG color','yellow','turquoise','red','purple','pink','peach','orange',
                    'lime','lightblue','lavender','hotpink','black','zebra'];
    
    function populate(objID,tarr){
      var obj = document.getElementById(objID);
      obj.options.length = 0;
      for( i=0; i < tarr.length; i++) {
        obj.options[obj.options.length] = new Option(tarr[i],tarr[i],false,false);
      }
    }
    function showCombo() {
      var FG = document.getElementById('SBoxFG').value;
      if (FG == 'Pick color') { return; }
      var BG = document.getElementById('SBoxBG').value;
      if (BG == 'Pick color') { return; }
      document.getElementById('colorCombos').src = baseURL+FG+BG+'.jpg';
    }
    window.onload = function() {
      populate('SBoxFG',FGcolors);
      populate('SBoxBG',BGcolors);
    }
    </script>
    
    </head>
    <body>
    
    <select id="SBoxFG" onchange="showCombo()"></select>
    <select id="SBoxBG" onchange="showCombo()"></select>
    <br>
    <img id="colorCombos" src="">
    </body>
    </html>
    There may be some selections that do not result in an image to display.

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