Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Selected option

  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Worcester, Ma
    Thanked 0 Times in 0 Posts

    Question Selected option

    Hello, I am new with javascript and have been trying all day to figure out how do this problem. I am not sure to use the switch or just if function? Basically I want a drop down to give a list of all ipod nano's and based on what generation is selected I want to display the correct storage space in checkboxes under my selection. I was able to get one option to come and go but after adding more I got lost.

    This is part of the html:
    (I am trying to use the div tag's display to hide and populate the area once its selected)

    <form action="#" method="post" enctype="multipart/form-data" name="deviceForm">
    <legend>Please select your device?</legend>
        <label for="nano">Nano</label>
            <select onchange="nanoIpod(this);" name="nanoIpod" class="medium">
          		<option value="nothing"></option>
    	  		<option value="nano1">iPod nano</option>
    	  		<option value="nano2">iPod nano 2nd generation</option>
    	  		<option value="nano3">iPod nano 3rd generation</option>
                <option value="nano4">iPod nano 4th generation</option>
                <option value="nano5">iPod nano 5th generation</option>
                <option value="nano6">iPod nano 6th generation</option>
    <div id="nothingDiv" name="nothingDiv" style="display: none">
    		<input name="1GB" type="checkbox" id="1GB" value="" />
            	<label for="1GB">1GB</label>
    		<input name="2GB" type="checkbox" id="2GB" value="" />
            	<label for="2GB">2GB</label>
            <input name="4GB" type="checkbox" id="4GB" value="" />
           	<label for="4GB">4GB</label>
    <div id="nano1Div" name="nano1Div" style="display: none">
    		<input name="4GB" type="checkbox" id="4GB" value="" />
            	<label for="4GB">4GB</label>
    		<input name="8GB" type="checkbox" id="8GB" value="" />
            	<label for="8GB">2GB</label>
            <input name="16GB" type="checkbox" id="16GB" value="" />
           	<label for="16GB">16GB</label>
    thanks in advance for your help
    function preparepage() {
    var ind=document.getElementById("nanoIpod").options[document.getElementById("nanoIpod").selectedIndex].value;
    function nanoIpod (obj){
    		document.getElementById("nothingDiv").style.display = 'none';
    window.onload = function () {
    Last edited by WA; 09-23-2011 at 09:14 AM.

  2. #2
    Senior Coder
    Join Date
    Dec 2010
    Thanked 570 Times in 563 Posts
    You don't have any element with id="nanoIpod", yet to try to address it using getElementById('nanoIpod'). This will definitely fail. So it's time to debug :-)

    1. Add an id attribute to the select (let's say "select1")
    2. document.getElementById('select1').value will give you the currently selected value of the select inside your onchange handler
    3. Depending on the value you can show/hide the depending div's

    If you need more info, feel free to ask. Please add your updated code then.

  3. #3
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Bucharest, ROMANIA
    Thanked 379 Times in 375 Posts
    <select onchange="nanoIpod(this);" name="nanoIpod" class="medium">
    Your element has a name="nanoIpod", not an id, thus you can not use the method document.getElementById() unless you give it also an id. Take care, unlike the token name, the id must be unique on document.

    Another thing: Don't name you functions same as other global variables or as other id or name attributes.
    Offshore programming


Tags for this Thread

Posting Permissions

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