的JavaScript得到的下拉列表值

我有這兩個下拉菜單的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函數，需要使用所選項目的數據值但不能找到一種方法來做到這一點，如果你能幫我一個真正的欣賞

來源

2016-11-15 user3704742

請發表您的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>

來源

2016-11-15 15:15:58

你忘了CSS。 –

@AdamAzad我怎麼忘了CSS？ –

CSS可以使該列表顯示爲一個選擇，但它需要相對廣泛的JavaScript來使其功能。使用它的一個優點是樣式選擇。 –

如果你通過標準document.getElementById選擇你的下拉菜單，你應該能夠通過t他是元素的數據集屬性。

來源

2016-11-15 15:15:28

的JavaScript得到的下拉列表值

回答

相關問題