从水平下拉菜单中选择加载 Iframe src

Question

我是这个网站的新会员...已经使用它很长时间了，但从来没有成为会员，但我找不到答案所以我想我应该问一下。
我刚开始使用 jquery 和 html select 或其他人所以如果这是一个简单的问题请原谅我但是.. 我正在使用 HTML5、css 和 jquery.我创建了一个三层深的水平下拉菜单。我想根据用户的 selection select html 页面加载到 iframe（每个页面代表一个报告）。当我 select 一个内部 il selection 时，我得到它的 ID，但随后它继续循环遍历 li 和 ul 直到它在父 li.

==> 这是 UL > IL > IL 树：

<li id="" onclick="processRequest(id)">
    <a href="#">link 4</a>
    <ul class="sub1">
        <li id="sublink41" onclick="processRequest('sublink41.html')">  <a href="#">-link 4.1</a></li>
        <li id="sublink42" onclick="processRequest(id)"> <a href="#">-link 4.2</a></li>
        <li id="sublink43">
            <a href="#">-link 4.3</a><span class="rarrow">&#9654</span>
            <ul class="sub2">
                <li id="sublink431" onclick="processRequest(id)"><a href="#">-- link 4.3.1</a></li>
                <li id="sublink432" onclick="processRequest(id)"> <a href="#">-- link 4.3.2</a></li>

==> 这是 jQuery 函数：

function processRequest(value) {
   var selectedValue = value;
   console.log('selected values is: '+selectedValue);
   $('#frameIt').replaceWith('<iframe id="frameIt" src= "' + selectedValue + '">')
}

我想使用 ID 来识别正确的 html 文件以加载到 iframe 但这是我通过 chrome 工具检查它时看到的...

default.aspx:71 selected values is: sublink41.html
default.aspx:71 selected values is:

如您所见，它找到了正确的值，但随后继续到父 LI 并在那里结束... 我已经花了一些时间试图找到解决这个问题的方法，但一直没能...感谢任何帮助。

Answer 1

尝试将 onclick 移动到 <a> 标签，而不是 <li> 标签。正如您现在的代码，点击冒泡 DOM 并可能多次触发 processRequest()，无意中将 id 替换为您真正想要的另一个值。

这里的回答可能对你也有用：

Answer 2

删除

onclick="processRequest(id)"

来自第一行的父 li 标签。

从水平下拉菜单中选择加载 Iframe src

Loading an Iframe src with selection from horizontal drop down menu

html

javascript

iframe

jquery