title: Use data value of li as form input using hidden input field
body: <p>I have an html which has a some list which is arranged in drop down style.If the data-selected is true,I want to assign that corresponding data value to an hidden input field</p>
  
  <pre><code>&lt;div id="mySelect" class="select btn-group m-b" data-resize="auto"&gt;
      &lt;button style="font-weight:700;background-color:#fff;border-style:solid;
      border-width:2px" type="button" id="expiry_month" name="expiry_month" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle"&gt; &lt;span class="dropdown-label"&gt;&lt;/span&gt;  &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li data-value="00" data-selected="true"&gt;&lt;a href="#"&gt;Select Month&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="01"&gt;&lt;a href="#"&gt;01&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="02"&gt;&lt;a href="#"&gt;02&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="03"&gt;&lt;a href="#"&gt;03&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="04"&gt;&lt;a href="#"&gt;04&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="05"&gt;&lt;a href="#"&gt;05&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="06"&gt;&lt;a href="#"&gt;06&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="07"&gt;&lt;a href="#"&gt;07&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="08"&gt;&lt;a href="#"&gt;08&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="09"&gt;&lt;a href="#"&gt;09&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="10"&gt;&lt;a href="#"&gt;10&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="11"&gt;&lt;a href="#"&gt;11&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-value="12"&gt;&lt;a href="#"&gt;12&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using a javascript how can I insert the value selected to an hidden input field?</p>
  
  <pre><code>&lt;input type="hidden" id="expiry_month"&gt;
  </code></pre>
  
  <p>TRIED</p>
  
  <pre><code>&lt;input type="hidden" id="hfSelectedMonth" value="0" /&gt;
  &lt;ul class="dropdown-menu"&gt;
     &lt;li data-value="00" data-selected="true"&gt;&lt;a class="selectOption" href="#" data-value="0"&gt;Select Month&lt;/a&gt;
     &lt;/li&gt;
     &lt;li data-value="01"&gt;&lt;a class="selectOption" href="#" data-value="1"&gt;01&lt;/a&gt;
     &lt;/li&gt;
     &lt;li data-value="02"&gt;&lt;a class="selectOption" href="#" data-value="2"&gt;02&lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  &lt;script type="text/javascript"&gt;
  
  $(".selectOption").click(function () {
      var selectedOption = parseInt($(this).attr('data-value'), 10);
      $("#hfSelectedMonth").val(selectedOption.toString());
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But doesnt work :(</p>