Question

我有两个下拉菜单

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Year
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="Year" id="Year" onchange="setAno()">
    <li><a href="#" id="Year" data-value="2016">2016</a></li>
    <li><a href="#" id="Year" data-value="2017">2017</a></li>
    <li><a href="#" id="Year" data-value="2018">2018</a></li>
    <li><a href="#" id="Year" data-value="2019">2019</a></li>
</ul>

和

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Month
<span class="caret"></span>
 </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="Month">
    <li><a href="#" data-value="01">1</a></li>
    <li><a href="#" data-value="02">2</a></li>
    <li><a href="#" data-value="03">3</a></li>
    <li><a href="#" data-value="04">4</a></li>
    <li><a href="#" data-value="05">5</a></li>
    <li><a href="#" data-value="06">6</a></li>
    <li><a href="#" data-value="07">7</a></li>
    <li><a href="#" data-value="08">8</a></li>
    <li><a href="#" data-value="09">9</a></li>
    <li><a href="#" data-value="10">10</a></li>
    <li><a href="#" data-value="11">11</a></li>
    <li><a href="#" data-value="12">12</a></li>
</ul>

我有一个JavaScript函数，需要使用所选项目的数据值，但如果你能帮助我真的很感激，就无法找到方法吗

Answer 1

如果您通过标准document.getElementById选择下拉列表，您应该能够通过元素的dataset属性在纯Javascript中获取数据属性。

Answer 2

您的代码未显示下拉菜单，它显示带有onchange事件处理程序的项目符号列表。它们看起来像下拉的唯一原因是因为正在应用它们的CSS样式。

<ul class="dropdown-menu" aria-labelledby="Year" id="Year" onchange="setAno()">

列表不支持change活动。那么，这就是为什么你的setAno()函数没有被调用的原因。您需要从列表项或其中的链接捕获click事件或实际使用下拉菜单：

 <select class="dropdown-menu" aria-labelledby="Year" id="Year" onchange="setAno()">
    <option>some choice</option>
    <option>some choice</option>
    <option>some choice</option>
 </select>

这是一个保存列表的示例，但捕获click事件，而不是change事件（从不在列表上触发）：

＆＃13;

var theMonthLinks = document.querySelectorAll("#Month > li > a");
for(var i = 0; i < theMonthLinks.length; ++i){
    theMonthLinks[i].addEventListener("click", function(){
       console.log(this.getAttribute("data-value"));
    })
}

＆＃13;

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="Month">
    <li><a href="#" data-value="01">1</a></li>
    <li><a href="#" data-value="02">2</a></li>
    <li><a href="#" data-value="03">3</a></li>
    <li><a href="#" data-value="04">4</a></li>
    <li><a href="#" data-value="05">5</a></li>
    <li><a href="#" data-value="06">6</a></li>
    <li><a href="#" data-value="07">7</a></li>
    <li><a href="#" data-value="08">8</a></li>
    <li><a href="#" data-value="09">9</a></li>
    <li><a href="#" data-value="10">10</a></li>
    <li><a href="#" data-value="11">11</a></li>
    <li><a href="#" data-value="12">12</a></li>
</ul>

＆＃13;

JavaScript获取下拉值

2 个答案: