加载 Iframe src，并从水平下拉菜单中进行选择

Loading an Iframe src with selection from horizontal drop down menu

本文关键字：下拉菜单 行选 选择 水平 Iframe src 加载      更新时间：2023-09-26

我是这个网站的新成员...已经使用了很长时间，但从未成为会员，但我无法找到答案，所以我想我应该问一下。
我是使用jquery和html选择器的新手，所以如果这是一个简单的问题，请原谅我，但是..我正在使用HTML5，css和jquery。 我创建了一个三级深的水平下拉菜单。 我想根据用户的选择选择要加载到 iframe 中的 html 页面（每个页面代表一个报告）。 当我选择一个内部 il 选择时，我得到了它的 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 来识别要加载到 iframe 中的正确 html 文件，但这是我通过 chrome 工具检查它时看到的...... 

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

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

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

这里的答案也可能对您有用：https://stackoverflow.com/a/1369080/4475757

删除

onclick="processRequest（id）"

从第一行的父 li 标记。

相关文章：