选择导航栏选项时，它会从下拉 HTML JS 中消失

Question

我想我做错了什么，但无法真正弄清楚是什么。

我有一个简单的导航下拉菜单到 select 特定年份。 当我点击我想要的年份时，它应该用数字替换 label 年份。

<div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Year</button>
    <div id="myDropdown" class="dropdown-content">
        <a onclick="tiptip(this)">2000</a>
        <a href="">2001</a>
        <a href="">2002</a>
    </div>
</div>

<script>
function tiptip(e) {
    $('.dropbtn').html(e);

}
</script>

现在这就是我所拥有的。 选择时，例如 2000，我希望按钮内的文本从“年”变为“2000”。 我能够做到这一点，但是选项“2000”似乎从下拉列表中消失了。

有谁知道我做错了什么？

Answer 1

1. 将“a”标签更改为“按钮”

2. 而是将“this”传递给您的 function 并将此 function 粘贴到您的脚本中

function tiptip(year){
let btn = document.querySelector(".dropbtn")
btn.innerText = year
}

就这样

Answer 2

在最初的问题中，您说您有一个drop down ，但我在您的代码中看不到任何下拉列表。 因此，我将提出两种解决方案，一种基于您的代码，其中包含div HTML 元素并稍作调整，另一种具有实际下拉菜单 HTML select 元素。 您将能够选择最适合您需求的一种。 我还将向您指出每个解决方案的简短/一个衬里版本。

单击每个代码片段下方的蓝色按钮运行代码片段，以实际查看每个代码片段的运行情况。

要实际查看一个班轮版本，您只需：

1. 点击相关的复制片段来回答
2. 删除注释所示的 3 行
3. 取消注释注释所指示的注释行
4. 通过单击运行代码片段来运行它

对于“div”HTML 元素：

 function changeYear(event) { let tgtEl = document.getElementById("myBtnId"); let srcEl = event.target; tgtEl.innerHTML = srcEl.innerHTML; // The one liner version (remove or comment the 3 rows above and de-comment the following one): // document.getElementById("myBtnId").innerHTML = event.target.innerHTML; }

 <div class="dropdown"> <button id="myBtnId" onclick="myFunction()" class="dropbtn">Year</button> <div id="myDropdown" class="dropdown-content" onclick="changeYear(event);"> <a href="javascript:void(0);">2000</a> | <a href="javascript:void(0);">2001</a> | <a href="javascript:void(0);">2002</a> | <a href="javascript:void(0);">2003</a> </div>

如果您希望使用“选择”HTML 元素：

 function changeYear(event) { let tgtEl = document.getElementById("myBtnId"); let srcEl = event.target; tgtEl.innerHTML = srcEl.value; // The one liner version (remove or comment the 3 rows above and de-comment the following one): // document.getElementById("myBtnId").innerHTML = event.target.value; }

 <div class="dropdown"> <button id="myBtnId" onclick="myFunction()" class="dropbtn">Year</button> <select id="myDropdown" class="dropdown-content" onchange="changeYear(event);"> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> </select> </div>

它是如何工作的：基本上，function changeYear(event)获取包含年份的源元素并提取其内容（innerHTML 或值取决于或有需要）并将此类内容注入目标元素，即按钮 innerHTML。

另请注意，如果您希望使用标签代替标签，您必须修改代码如下：在第一种情况下使用div和 HTML 元素的组合，该部分

tgtEl.innerHTML = srcEl.value;

变成

tgtEl.value = srcEl.value;

或者

在第二种情况下，使用select HTML 元素，该部分

    tgtEl.innerHTML = srcEl.value;

变成

    tgtEl.value = srcEl.value;

而一个班轮版本将是：

在第一种情况下（使用div+a ）：

    document.getElementById("myBtnId").value = event.target.innerHTML;

在第二种情况下（使用select ）：

    document.getElementById("myBtnId").value = event.target.value;

javascript的问题：void(0); 部分：

另请注意，从 HTML 部分

    <a href="javascript:void(0);">200N</a> |

您可以删除代码javascript:void(0); 使 HTML 代码更清晰，更易于维护。 通过这样做，当您单击其中一个a元素时，页面将 go 到 href="" 值，该值将是一个空字符串。 为了防止这种不需要的行为，您可以在 function 中添加一行：

function changeYear(event)
{
    event.preventDefault(); // the row to add to be able remove the code javascript:void(0); from the HTML code

    // here you will keep the rest of the statements as in the original code
}