Iframe branch

server.rb

@@ -127,6 +127,10 @@ def get_mime_type_for(filename)
     erb :nested_frames, :layout => false
   end
 
+  get '/nested_Iframes' do
+    erb :nested_Iframes, :layout => false
+  end
+
   get '/frames' do
     erb :frames
   end

views/dropdown.erb

@@ -8,6 +8,21 @@
     <option value="2">Option 2</option>
   </select>
 </div>
+
+<div class="example">
+  <h3>Multiple value Dropdown List</h3>
+  <select id="dropdown1" multiple="true">
+    <option value="" disabled="disabled" selected="selected"
+      >Please select an option</option
+    >
+    <option value="1">Option 1</option>
+    <option value="2">Option 2</option>
+    <option value="3">Option 3</option>
+    <option value="4">Option 4</option>
+  </select>
+</div>
+
+
 <script>
   var dropdown = document.getElementById('dropdown');
   dropdown.onchange = function(event) {
@@ -20,3 +35,16 @@
       .setAttribute('selected', 'selected');
   };
 </script>
+
+<script>
+  var dropdown = document.getElementById('dropdown1');
+  dropdown.onchange = function(event) {
+    var options = dropdown.getElementsByTagName('option');
+    for (var i = 0; i < options.length; i++) {
+      options[i].removeAttribute('selected');
+    }
+    document
+      .querySelector(`#dropdown1 option[value='${event.target.value}']`)
+      .setAttribute('selected', 'selected');
+  };
+</script>

views/frames.erb

@@ -3,5 +3,6 @@
   <ul>
     <li><a href='/nested_frames'>Nested Frames</a></li>
     <li><a href='/iframe'>iFrame</a></li>
+    <li><a href='/nested_Iframes'>iFrame Example</a></li>
   </ul>
 </div>

views/nested_Iframes.erb

@@ -0,0 +1,13 @@
+<div >
+<p>Iframe example - in Main Frame</p>
+  <div >
+    <iframe name="iframe1" id="IF1" height="50%" width="50%" src="/frame_left"> 
+
+    </iframe>
+  </div>
+  <div >
+  <iframe name="iframe2" id="IF2" height="50%" width="50%"  align="left" src="/frame_bottom">
+
+  </iframe>
+  </div>
+</div>