title: Loading an Iframe src with selection from horizontal drop down menu
body: <p>I am a new member to this site...have used it for a long time but never a member but i have not been able to find an answer so I thought I should ask.<br>
  I am new to working with <strong>jquery</strong> and html selectors so please forgive me if this is easy question but..
  I am using <strong>HTML5</strong>, <strong>css</strong>, and <strong>jquery</strong>.  I created a horizontal drop down menu that is three levels deep.  I want to select html pages to load into an iframe based on the user's selection (each page represents a report).  when I select an inner il selection, I get its id, but then it continues looping through the <code>li</code> and <code>ul</code> until it ends at the parent <code>li</code>.  </p>
  
  <p>==>  this is the UL > IL > IL tree:</p>
  
  <pre><code>&lt;li id="" onclick="processRequest(id)"&gt;
      &lt;a href="#"&gt;link 4&lt;/a&gt;
      &lt;ul class="sub1"&gt;
          &lt;li id="sublink41" onclick="processRequest('sublink41.html')"&gt;  &lt;a href="#"&gt;-link 4.1&lt;/a&gt;&lt;/li&gt;
          &lt;li id="sublink42" onclick="processRequest(id)"&gt; &lt;a href="#"&gt;-link 4.2&lt;/a&gt;&lt;/li&gt;
          &lt;li id="sublink43"&gt;
              &lt;a href="#"&gt;-link 4.3&lt;/a&gt;&lt;span class="rarrow"&gt;&amp;#9654&lt;/span&gt;
              &lt;ul class="sub2"&gt;
                  &lt;li id="sublink431" onclick="processRequest(id)"&gt;&lt;a href="#"&gt;-- link 4.3.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li id="sublink432" onclick="processRequest(id)"&gt; &lt;a href="#"&gt;-- link 4.3.2&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>==> this is the jQuery function:</p>
  
  <pre><code>function processRequest(value) {
     var selectedValue = value;
     console.log('selected values is: '+selectedValue);
     $('#frameIt').replaceWith('&lt;iframe id="frameIt" src= "' + selectedValue + '"&gt;')
  }
  </code></pre>
  
  <p>I want to use the ID to identify the correct html file to load into the iframe  but here is what I see when I inspect this via chrome tools...              </p>
  
  <pre><code>default.aspx:71 selected values is: sublink41.html
  default.aspx:71 selected values is: 
  </code></pre>
  
  <p>as you can see, it finds the correct value but then it continues to the parent LI and ends there...
  I have put in some time trying to find a solution to this but have not been able to...any help is appreciated.</p>