Click here to Skip to main content
14,330,776 members
Rate this:
Please Sign up or sign in to vote.
See more:
I have created a dynamic drop-down list using JavaScript and I want the alert to list all the selections the user picks. And I want to create an iframe after user completes selection.

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Test</title>
<script type="text/javascript">
function urlRedirectTo(obj)
			{
				alert('Here are all the wrestling videos for '+obj);
				if('2013-2014' == obj)
				var iframe = document.createElement('iframe');
				var html = '<body>Foo</body>';
				document.body.appendChild(iframe);
				iframe.contentWindow.document.open();
				iframe.contentWindow.document.write(html);
				iframe.contentWindow.document.close();
				//if('wordpress_version2' == obj)
					//window.location = 'https://wordpress.org/download/';
			}
			function dynamicdropdown(listindex)
            {
                document.getElementById("sub_subcategory").length = 0;
                document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
                document.getElementById("subcategory").length = 0;
                switch (listindex)
                {
                    case "Elementary" :
                        document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
                        document.getElementById("subcategory").options[1]=new Option("Wordpress","Wordpress");
                        document.getElementById("subcategory").options[2]=new Option("Magento","Magento");
                        break;
                    
                    case "Junior High" :
                        document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
                        document.getElementById("subcategory").options[1]=new Option("Strauts","Strauts");
                        document.getElementById("subcategory").options[2]=new Option("Hibernate","Hibernate");
                        break;
                    case "Junior Varsity" :
                        document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
                        document.getElementById("subcategory").options[1]=new Option("Prototype","Prototype");
                        document.getElementById("subcategory").options[2]=new Option("jQuery","jQuery");
                        break;
                    case "Varsity" :
                        document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
                        document.getElementById("subcategory").options[1]=new Option("Marc Hendricks","Marc Hendricks");
                        break;
                    default:
                        document.getElementById("subcategory").options[0]=new Option("Please select Wrestler","");
                        break;
                }
                return true;
            }
            
            function dynamicdropdownone(listindex)
            {
                document.getElementById("sub_subcategory").length = 0;
                switch (listindex)
                {
                    case "Wordpress" :
                        document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
                        document.getElementById("sub_subcategory").options[1]=new Option("Wordpress Version1","wordpress_version1");
                        document.getElementById("sub_subcategory").options[2]=new Option("Wordpress Version2","wordpress_version2");
                        break;
                    
                    case "Magento" :
                        document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
                        document.getElementById("sub_subcategory").options[1]=new Option("Magento Version1","magento_version1");
                        document.getElementById("sub_subcategory").options[2]=new Option("Magento Version2","magento_version2");
                        break;
                    case "Strauts" :
                        document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
                        document.getElementById("sub_subcategory").options[1]=new Option("Strauts Version1","strauts_version1");
                        document.getElementById("sub_subcategory").options[2]=new Option("Strauts Version2","strauts_version2");
                        break;
                    
                    case "Hibernate" :
                        document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
                        document.getElementById("sub_subcategory").options[1]=new Option("Hibernate Version1","hibernate_version1");
                        document.getElementById("sub_subcategory").options[2]=new Option("Hibernate Version2","hibernate_version2");
                        break;
                    case "Prototype" :
                        document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
                        document.getElementById("sub_subcategory").options[1]=new Option("Prototype Version1","prototype_version1");
                        document.getElementById("sub_subcategory").options[2]=new Option("Prototype Version2","prototype_version2");
                        break;
                    
                    case "jQuery" :
                        document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
                        document.getElementById("sub_subcategory").options[1]=new Option("jQuery Version1","jquery_version1");
                        document.getElementById("sub_subcategory").options[2]=new Option("jQuery Version2","jquery_version2");
                        break;
                    case "Marc Hendricks" :
                        document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
                        document.getElementById("sub_subcategory").options[1]=new Option("2013-2014","2013-2014");
                        document.getElementById("sub_subcategory").options[2]=new Option("2014-2015","2014-2015");
                        document.getElementById("sub_subcategory").options[3]=new Option("2015-2016","2015-2016");
                        document.getElementById("sub_subcategory").options[4]=new Option("2016-2017","2016-2017");
                        document.getElementById("sub_subcategory").options[5]=new Option("2017-2018","2017-2018");
                        break;
                    default:
                        document.getElementById("sub_subcategory").options[0]=new Option("Please select Year","");
                        break;
                }
                return true;
            }
       </script>
</head>
<body>
  <div class="sub_category_div" id="sub_category_div">
            <script type="text/javascript" Wrestling Level="JavaScript">
                document.write('<select name="subcategory" id="subcategory" onchange="javascript: dynamicdropdownone(this.options[this.selectedIndex].value);"><option value="">Please select Wrestler</option></select>')
            </script>
            <noscript>
                <select name="subcategory" id="subcategory" >
                    <option value="">Please select Year</option>
                </select>
            </noscript>
        </div>

  <div class="sub_subcategory_div" id="sub_subcategory_div">
            <script type="text/javascript" Wrestling Level="JavaScript">
                document.write('<select name="sub_subcategory" onchange="javascript: urlRedirectTo(this.options[this.selectedIndex].value);" id="sub_subcategory"><option value="">Please select Year</option></select>')
            </script>
            <noscript>
                <select name="sub_subcategory" id="sub_subcategory" >
                    <option value="">Please select Year</option>
                </select>
            </noscript>
        </div>
</body>
</html>


What I have tried:

I have attempted to reference the different selections Wrestling Level & Wrestler Name which in this case would be Marc Hendricks, but every time I do the whole dynamic drop-down list quits working entirely. To create an iframe I try creating the iframe elements with
var iframe = document.createElement('iframe');
				var html = '<body>Foo</body>';
				document.body.appendChild(iframe);
				iframe.contentWindow.document.open();
				iframe.contentWindow.document.write(html);
				iframe.contentWindow.document.close();

but nothing displays. I'm not sure if it's because I'm not calling the function properly but it's not diplaying an iframe.
Posted
Updated 3-Oct-19 19:18pm
Comments
ZurdoDev 4-Oct-19 13:23pm
   
You already posted this. If you want more to show in the alert then you need to pass in more items. Simple.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100