的JavaScript得到的下拉列表值

问题描述：

<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函数，需要使用所选项目的数据值但不能找到一种方法来做到这一点，如果你能帮我一个真正的欣赏

请发表您的JavaScript函数的一个片段。这将有助于分析。 –

答

您的代码不显示下拉菜单，它显示带有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事件（这永远不会在列表火灾）：

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")); 
 
    }) 
 
}

<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>

你忘了CSS。 –

@AdamAzad我怎么忘了CSS？ –

CSS可以使该列表显示为一个选择，但它需要相对广泛的JavaScript来使其功能。使用它的一个优点是样式选择。 –

答

如果你通过标准document.getElementById选择你的下拉菜单，你应该能够通过t他是元素的数据集属性。

的JavaScript得到的下拉列表值

相关推荐