Question

我有这个相对简单的下拉菜单而且没有得到它。为什么它只显示最后一个菜单，一切都在最后一个菜单之下？当我点击它时，它首先显示名称，然后立即显示另一个警告＆＃34; undefined＆＃34;。这是下拉菜单，悬停子菜单显示。

    <!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {background-color: #4CAF50; color: white; cursor: pointer;}
.dropdown { position: relative; display: inline-block;}
.dropdown-content { display: none; position: absolute;}
.dropdown-content a { display: block;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content { display: block;}
.dropdown:hover .dropbtn { background-color: #3e8e41;}
</style>
</head>
<body>

<div class="dropdown">
 <input type="button" id="dropbtnID" value="Select" class="dropbtn">
  <div class="dropdown-content">    
    <input type="text" value="a" id="a" class="dropdown-content">
    <input type="text" value="b" id="a" class="dropdown-content">
    <p id="c" name="c" class="dropdown-content">cc</p>
    <p id="d" name="d" class="dropdown-content">dd</p> 
</div></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".dropdown-content").click(function(){
      var name = $(this).attr("name");
      alert(name);       
    });
});
</script>
</body>
</html>

Answer 1

代码存在许多问题。首先，a和b具有相同的ID（＆＃34; a＆＃34;）：

    a.on('click',function() {
        Qualtrics.SurveyEngine.setEmbeddedData("clicked", 1); //adjust embedded data variable here
    });

并且您提出未定义警报的原因是您的父div与下拉列表中的元素具有相同的类 - 因此第一个警报是针对元素（例如<input type="text" value="b" id="b" class="dropdown-content">）和第二个是没有名字的父div（因此name="d"）。

然后是布局问题。总而言之 - 您需要返回代码并修复每一行。

下拉菜单基础知识

1 个答案: