php - 单击链接以显示下拉菜单

Question

我只想在单击链接时显示“免费聊天”链接。它必须显示一个带有选项“yes”和“no”的下拉菜单。

链接还不能转到任何地方，只有当选择“yes”时，它才必须重定向到页面。

我目前有代码:

<a href="" id="link" name="link" onClick="yesnolist(1)">Free Chat</a>

和我的 JavaScript:

<script type="text/JavaScript">
  function yesnolist()
  {
     var e = document.getElementById("link");
     var strUser1 = e.options[e.selectedIndex].value;
     if (strUser1 == "1")
        window.location.href = "http://.........";

     return strUser1;
  }
 </script>

Answer 1

我不确定我是否完全理解你的问题。

我假设您已经说过链接:

<a href="" id="link" name="link" onClick="yesnolist(1)">Free Chat</a>

现在，当有人点击时，您希望它创建一个下拉菜单？我不确定您的意思是 anchor 元素旁边的下拉菜单还是用下拉菜单替换 anchor 元素。

我会建议，在任何时候，使用 jQuery for javascript，但因为看起来你没有使用它:

<a href="#yesno" id="link" name="link">Free Chat</a>
<select id="yesno_id" name="yesno" style="display:none;">
    <option value="1">Yes</option>
    <option value="2">No</option>
</select>

我们还不会显示下拉列表，即使它已经存在。现在我们向 #link 和 #yesno_id 添加一个监听器(请注意，以下代码要么位于标记之前，要么应放置在正文 onload 监听器内)。

<script type="text/javascript">
document.getElementById('link').addEventListener('click', function() {
    var yesno = document.getElementById('yesno_id');
    yesno.style.display = 'block';
    yesno.addEventListener('change', function() {
        if (this.value === '1') {
            window.location.href = "http://.........";
        }
        else {
            this.style.display = 'none';
        }
    }, true);

}, true);
</script>

我根本没有测试它，并且很可能会出现错误(我什至没有在编辑器上编写它)，但它应该为您提供总体思路。

这里我们使用不显眼的 JavaScript:我们不在 HTML 上添加任何对 JavaScript 的引用。我们只有 id 和类，就像任何没有 JS 的 HTML 一样。然后，除此之外，我们还使用 JavaScript 访问 HTML 元素，并绑定(bind)单击和更改事件处理程序(对应于每个元素)。

如果用户点击链接然后选择“否”，它将隐藏下拉列表，如果选择"is"，它将重定向到您所说的网址。如果确实在 anchor 的 href 上有链接并取消事件传播，那就太好了。然后从 yesno_id 事件处理程序中获取 href 并重定向到该地址。这样，如果 JS 被禁用，它会直接带你到页面(尽管它不会“确认”)。