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
    May 2003
    Location
    Toronto
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Drop Down value with onClick

    Okay here is the situation:

    I'm using PHP, Javscript and mySQL for this project. I have successfully created a dynamic drop down menu. The second drop drown will change depending on the what the user chooses for the first menu.

    What I would like to do is have a button(picture) that can change the selected item in the second drop down menu using the onClick command.

    For example, the first drop down is metal alloys, the second is the product line (I-Beam, Round, Hex, etc.). I have an accompanying picture of each of the product lines. So I would like the user to be able to click on the picture and have it change the value of the second drop down. I'm not sure if this can be done or how to access it through the DOM.

    I REALLY need some help on this so any tips would be greatly appreciated. Thanks.

    Here is the jist of the code I'm using (after PHP has translated the page):

    Code:
    <!-- ALLOY SELECT-->
    <td colspan="8" width="112" height="42" align="left" valign="top" bgcolor="#999999">
    <select class="drop" name="Alloy" onChange="alloyselected(this);" > 
    <option value=""  class=""><b>Select an Alloy</b></option>
    <option value="">---------------</option>
    	
    <option value='1'>Aluminum</option>
    <option value='4'>Commercial</option>
    <option value='3'>Copper</option>
    <option value='5'>Nickel</option>
    <option value='2'>Steel</option>         
    </select>	
    
    <!-- PRODUCT LINE SELECT -->
    <select class="drop" name="proLine">
    <option value=""  class=""><b>Select an Alloy</b></option>
    <option value="">---------------</option>
    </select>
    
    <SCRIPT LANGUAGE="JavaScript">
    function alloyselected(elem){
     for (var i = document.f1.proLine.options.length; i >= 0; i--){ 
     document.f1.proLine.options[i] = null;
    }
    if (elem.options[elem.selectedIndex].value==1){
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Zee','18');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Angle','1');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hollow Tube','3');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('I-Beam','10');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Rectangle','13');
    }
    if (elem.options[elem.selectedIndex].value==4){
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hex','12');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Zee','19');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Angle','2');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hollow Tube','6');
    }
    if (elem.options[elem.selectedIndex].value==3){
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Round','8');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hex','11');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Channel','15');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hollow Tube','5');
    }
    if (elem.options[elem.selectedIndex].value==5){
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Rectangle','14');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Tee','17');
    }
    if (elem.options[elem.selectedIndex].value==2){
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hollow Tube','4');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Round','7');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('I-Beam','9');
    document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Channel','16');
    
    }
    }
    
    </SCRIPT>

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try something like this:

    function setSelect(oSelect, sText) {
    if (typeof oSelect == 'undefined') return false;
    var opt, i = 0;
    while (opt = oSelect.options[i++])
    if (opt.text == sText) opt.selected = true;
    return false;
    }

    Call like this:

    <img style="cursor:hand;cursor:pointer;" alt="Hollow Tube" src="............" onclick="return setSelect(document.f1.proLine,this.alt)">

  • #3
    New Coder
    Join Date
    May 2003
    Location
    Toronto
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll try that out in a bit.. thanks


    Basically I am also wondering what the correct syntax is to read/change a value in a drop down from another source (such as a menu or using onClick).

    The form is:

    document.f1.proLine

    Thanks.

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Option.value is just a (string) variable. Get a reference to it, then assign something:

    document.f1.proLine.options[n].value = 'something';

    ...where n is its position in the list.

    Of course, how you get the reference could vary depending on what data you use to find the particular option (like its .text property above).

  • #5
    New Coder
    Join Date
    May 2003
    Location
    Toronto
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I appreciate your ongoing help Cheesebagpipe.

    Basically I don't really want to change the value of any drop downs as much as actually 'selecting' an option through the onClick command. This is because the values in the drop down are read from PHP/MySQL and are later used so I really just want (if possible) the drop down to change its 'focus' onto one of the list items. I've been trying through the function I have above but I'm not having any luck. Is there a way to do this directly through Javascript?

    Thanks again.

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So I would like the user to be able to click on the picture and have it change the value of the second drop down.
    I am also wondering what the correct syntax is to read/change a value in a drop down from another source
    Basically I don't really want to change the value of any drop downs....


    You need to be bit clearer about what you want. It's not 'focus' you're after - it's selecting the option programmatically, just as a user would manually. The above does that, using the passed text argument (representing the text shown for the option) as its criteria; it gets it from the alt attribute of the image, for convenience. You keep mentioning selecting an option, without being specific about what criteria you'll be using.

  • #7
    New Coder
    Join Date
    May 2003
    Location
    Toronto
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    my apologies.. I know it's not the focus. Okay I've almost figured out my function but I'm getting some inconsistant results. Here is what I'm trying to do.

    I will sent a value into the function. This value represents a product. (eg. 4 = Rectangle in mySQL database).

    In the function I want to check to see if the second drop down menu (which is dynamically linked to the first) which is the product line contains the value passed into the function. If the drop down contains the value passed into it then it will select that item in the drop down (selectIndex). If there is no matching value (the product line is not in the drop down) then nothing will happen. I'm just not sure if I'm looping through the menu correctly.

    I hope that clears things up a bit. I had things close this morning but somehow things have gotten messed up again.

    Here is what I have

    Code:
    function dropchecker(product) {
    
    i=1;
    var menuitem;
    var menulength = document.f1.proLine.options.length;
    		for (i=1; i<menulength; i++) {
    			menuitem = document.f1.proLine.options[i].value;
    			if ( menuitem == product) {
    			//document.write('there is a match');
    			document.f1.proLine.options.selectedIndex = product;
    			
    			} else {
    				//document.write('sorry, no match');
    			
               }
          }
    }

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    function dropchecker(product) {
        var menuitem, oSelect = document.f1.proLine;
        var menulength = oSelect.options.length;
        for (var i=1; i<menulength; i++) {
    	 menuitem = oSelect.options[i].value;
    	 if (menuitem == product) {
                 oSelect.options[i].selected = true;
                 return true;
          }	
       }
    }
    Skip the document.write()s. Don't want to start a new web page.

  • #9
    New Coder
    Join Date
    May 2003
    Location
    Toronto
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Phew!

    Cheers Mate!

    Got it working.. only took me all day and your help. I've been learning the server side stuff for a while and I haven't used Javascript in a while (as you can probably tell).

    But.... Since we're on the subject here. I'm basically having a similar problem. Same script as above but this time I want to change the first drop down menu. Now I've managed to actually change what is showing in the drop down but the problem is it's not dyanimcally 'updating' what's in the second drop down. I've been playing around but no luck. It uses the function alloyselect up above to do it's stuff.

    Any ideas?


  •  

    Posting Permissions

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