SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    select tag javascript (dependent dropdownlist)

    I have to create two dropdownlists that are dependent

    In my first select tag there are 4 selections ,,, year,quarter,month and week.
    and in second select it should automatically populate..If user select year from first select in second select values should be 1 to 365.. if quarter values in second select(dropdown) should be 1 to 4. if month 1 to 12 and if week is selected 1 to 7.. can anyone help me to achieve this.. I will post that code and please help me to resolve this error as iam naive user to javascript..





    <select id="user_defn_uom" name="user_defn_uom" onchange="alert(this.options[this.selectedIndex].text)" align="center">

    <option selected value="">
    <option value="Yearly">Yearly
    <option value="Quarterly">Quarterly
    <option value="Monthly">Monthly
    <option value="Weekly">Weekly
    </td>







    <td>.
    <select name="user_defn_day" align="center">
    <option selected value="">



    <script type="text/javascript">

    alert(this.options[this.selectedIndex].text)



    for (var i = 1; i <=366; i++)
    {
    document.write('<option value="' + i + '">' + i + '</option>');

    }

    </script>
    </select>

  2. #2
    SitePoint Member
    Join Date
    Nov 2009
    Location
    North Carolina
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hi. Below is a working example that does what you are asking. Be sure you have the ID attribute specified in each of your select tags so that the elements will be found in JavaScript. You can also clean this up a bit if you want. What I did was write a function that takes the value selected. I then call a function that determines the correct ending number and then clears and populates the select box with the correct range. If you have specific questions let me know. Enjoy!

    Code:
    <html>
    <head>
    	
    	<script type="text/javascript">
    		
    		function UpdateRange(v)
    		{
    			switch(v)
    			{
    				case "Yearly":
    				end = 366;
    				break;
    				
    				case "Quarterly":
    				end = 4;
    				break;
    				
    				case "Monthly":
    				end = 12;
    				break;
    				
    				case "Weekly":
    				end = 52;
    				break;
    			}
    			alert("end = " + end);
    			
    			//clear all options from list 
    			document.getElementById('user_defn_day').options.length = 0;		
                            //add default (blank) option
    			var optn = document.createElement("OPTION");
    			optn.text = '';
    			optn.value = '';
    			
                         document.getElementById('user_defn_day').options.add(optn)						
    
                            //loop through and add range numbers
    			for (var i=1; i<=end; i++) 
    			{ 
    				var optn = document.createElement("OPTION");
    				optn.text = i;
    				optn.value = i;
    				document.getElementById('user_defn_day').options.add(optn)				
    			}
    		}
    	</script>
    	
    </head>
    <body>
    
    <form name="frmMain">
    
    Period:	
    <select id="user_defn_uom" name="user_defn_uom" onchange="UpdateRange(this.value);" align="center">
    <option selected value=""></option>
    <option value="Yearly">Yearly</option>
    <option value="Quarterly">Quarterly</option>
    <option value="Monthly">Monthly</option>
    <option value="Weekly">Weekly</option>
    </select>
    
    <br>
    Range:
    <select id="user_defn_day" name="user_defn_day" align="center">
    <option selected value=""> 
    </select>
    
    </form>
    </body>
    </html>
    If I have been of help to you please consider making a
    donation for my time via PayPal here.
    Get a GREAT domain for under $20 each day via my
    STEAL of the DAY page.


Bookmarks

Posting Permissions

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