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 Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Copy drop-down value to another drop-down

    Hello there, CodingForums.com!

    I'm a newbie to Javascript, HTML, XHTML, CSS-- and oh god, everything, so please bear with me! I have come to understand that to get any better, I'll need support. I hope you guys (and gals) can assist!

    Here is my issue: I'm currently trying to develop a first-draft calculator that will allow me to calculate some values for work and the way I want it requires me to do it with a pair of drop-downs.

    Take a look at it here:

    http://www.projectvoid.co.uk/

    I would like to select the first drop-down, on the left-hand side (Current Lighting Products -> Type of Lamp) and for the right-hand side to copy it's selected value (Energy Efficient Products -> Type of Lamp).

    Furthermore, it shouldn't interfere with the fact that I'm also using those values with my dependent drop-down, below (Wattage).

    The only piece of code I've found that might help is this:

    Code:
    function setSelect(name1, name2) 
    {
    
    var select1 = document.forms.formname.elements[name1];
    var select2 = document.forms.formname.elements[name2];
    
    select1.selectedIndex = select2.selectedIndex;
    
    }
    I am also unsure how to utilize it.

    I look forward to your aid! Thank you in advance.
    Last edited by Wyrdathru; 09-12-2011 at 12:50 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You can create a function to copy one select to the other:
    Code:
    function copy_selection(source_id,target_id){
    	var source=document.getElementById(source_id);
    	var target =document.getElementById(target_id);
    	target.value=source.value;
    	if(target_id=="product"){
    		//we're updating the select element related to the parent select element with id of "product"
    		dropdownlist2(target.value);
    	}
    	else if(target_id=="product_type"){
    		//we're updating the select element related to the parent select element with id of "product_type"
    		dropdownlist(target.value);
    	}
    	else{
    		alert('Invalid target ID...');
    	}
    }
    Then just add the appropriate function call to the inline javascript for your relevant select fields like so:

    Code:
    <select name="product_type" id="product_type" onChange="javascript: dropdownlist(this.options[this.selectedIndex].value);copy_selection('product_type','product');".
    Code:
    <select name="product" id="product" onchange="javascript: dropdownlist2(this.options[this.selectedIndex].value);copy_selection('product','product_type');">
    This basic idea works in Firefox at least. I haven't tested it in IE.
    Last edited by VIPStephan; 09-12-2011 at 04:51 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey there, Rowsdower!

    Thank you very much for the code, it works as is. I confirmed and it works with IE, so that's awesome-- but now I'd like to try and figure out what that code does.

    Would you mind helping me?

    The first question is about what this little piece of code does:
    Code:
    var rel="nofollow";

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I have no idea what that is doing there. CF is adding that to my posted code... Weird. If I click "reply" that part of the posted code goes back to normal (meaning the rel="nofollow" goes away). If I try to edit my post it is also missing that piece of garbage.

    Yet when viewed in the main thread it's there plain as day.

    Well, anyway, that piece of code you posted should just be removed from the script you use in the page. I didn't add it and I can't seem to edit it out from here...

    Edit: Note, you should keep the var part, just delete the rel="nofollow part"
    Last edited by Rowsdower!; 09-12-2011 at 03:05 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That is strange! Thank you for your assistance!

    I'm going to try and tackle another problem soon, but this should help me out for the time being.

    Cheers!


  •  

    Posting Permissions

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