user3704742 user3704742 - 17 days ago 5
HTML Question

JavaScript get drop-down values

I have this two drop-down menus

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


and

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


And I have a JavaScript function that need to use the data-values of the selected item but a canĀ“t find a way to do that, if you can help me a really appreciate

Answer

Your code does not show drop-down menus, it shows bulleted lists with an onchange event handler. The only reason they look like drop-downs to you is because of the CSS styling that is being applied to them.

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

Lists don't support a change event. So, that's why your setAno() function is not being called. You'll need to either capture the click event from your list items or the links within them or actually use drop-down menus:

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

Here's an example that keeps your lists, but captures the click event, rather than the change event (which never fires on lists):

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>

Comments