Change ul li to select option
<p>I wanna change actual ul li to select option in my template. In original script I use ul li tags, but for new template I need change it to select option. Original code look like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#line li').click(function() {
 var parentClass = $(this).parent().attr('class');
 if ($(this).index() &gt; 0) {
  if (parentClass == 'time') {
   var data = $(this).attr('data-formVar');
   $('#form_'+parentClass).val(data);
   $('.'+parentClass+' li.active').removeClass('active');
   $(this).addClass('active');
  } else if (parentClass == 'genre') {
   var data = $(this).attr('data-formVar'),
    formVarElement = $('#form_'+parentClass);
   if (data == '') {
    formVarElement.val('');
    $('.'+parentClass+' li.active').removeClass('active');
    $(this).addClass('active');
   } else {
    $(this).parent().children().eq(1).removeClass('active');
    if ($(this).hasClass('active')) {
     $(this).removeClass('active');
     genreSelection[$(this).index() - 1] = 0;
    } else {
     $(this).addClass('active');
     genreSelection[$(this).index() - 1] = 1;
    }
    var toPaste = '';
    $.each(genreSelection, function(key, value) {
     if (value == 1) {
      toPaste += key+',';
     }
    });
    formVarElement.val(toPaste);
   }
  }
 }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
&lt;li &gt;&lt;a href="?page=homepage&amp;day=-1"&gt;Yesterday&lt;br /&gt;&lt;span class="date"&gt;05.04.2016&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class = "active"&gt;&lt;a href="?page=homepage&amp;day=0"&gt;Today&lt;br /&gt;&lt;span class="date"&gt;06.04.2016&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li &gt;&lt;a href="?page=homepage&amp;day=1"&gt;Tomorrow&lt;br /&gt;&lt;span class="date"&gt;07.04.2016&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li &gt;&lt;a href="?page=homepage&amp;day=2"&gt;Friday&lt;br /&gt;&lt;span class="date"&gt;08.04.2016&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li &gt;&lt;a href="?page=homepage&amp;day=3"&gt;Saturday&lt;br /&gt;&lt;span class="date"&gt;09.04.2016&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li &gt;&lt;a href="?page=homepage&amp;day=4"&gt;Sunday&lt;br /&gt;&lt;span class="date"&gt;10.04.2016&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li &gt;&lt;a href="?page=homepage&amp;day=5"&gt;Monday&lt;br /&gt;&lt;span class="date"&gt;11.04.2016&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li &gt;&lt;a href="?page=homepage&amp;day=6"&gt;Tuesday&lt;br /&gt;&lt;span class="date"&gt;12.04.2016&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li &gt;&lt;a href="?page=homepage&amp;day=7"&gt;Wednesday&lt;br /&gt;&lt;span class="date"&gt;13.04.2016&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="line"&gt;
&lt;ul class="time"&gt;
&lt;li class="active" data-formVar="now"&gt;&lt;a href="#"&gt;Right now&lt;/a&gt;&lt;/li&gt;
&lt;li  data-formVar="day"&gt;&lt;a href="#"&gt;All day&lt;/a&gt;&lt;/li&gt;
&lt;li  data-formVar="evening"&gt;&lt;a href="#"&gt;Evening&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ul class="genre"&gt;
&lt;li class="active"  data-formVar=""&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt;
&lt;li data-formVar="1"&gt;&lt;a href="#"&gt;Movies&lt;/a&gt;&lt;/li&gt;
&lt;li data-formVar="2"&gt;&lt;a href="#"&gt;Serials&lt;/a&gt;&lt;/li&gt;
&lt;li data-formVar="3"&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
&lt;li data-formVar="4"&gt;&lt;a href="#"&gt;Sport&lt;/a&gt;&lt;/li&gt;
&lt;li data-formVar="5"&gt;&lt;a href="#"&gt;Document&lt;/a&gt;&lt;/li&gt;
&lt;li data-formVar="6"&gt;&lt;a href="#"&gt;Other&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>This is my new HTML template with javascript. I changed ul li to select option in script and removed div id "line" in template. But script is not working. And I don't know why. If I click on select and choose any option it will reload page without effect.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('select').on('change', function () {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
 var parentClass = $(this).parent().attr('selected','selected');
 if ($(this).index() &gt; 0) {
  if (parentClass == 'time') {
   var data = $(this).attr('data-formVar');
   $('#form_'+parentClass).val(data);
   $('.'+parentClass+' option:selected').removeClass('selected');
   $(this).addClass('selected');
  } else if (parentClass == 'genre') {
   var data = $(this).attr('data-formVar'),
    formVarElement = $('#form_'+parentClass);
   if (data == '') {
    formVarElement.val('');
    $('.'+parentClass+' option:selected').removeClass('selected');
    $(this).addClass('selected');
   } else {
    $(this).parent().children().eq(1).removeClass('selected');
    if ($(this).hasClass('selected')) {
     $(this).removeClass('selected');
     genreSelection[$(this).index() - 1] = 0;
    } else {
     $(this).addClass('selected');
     genreSelection[$(this).index() - 1] = 1;
    }
    var toPaste = '';
    $.each(genreSelection, function(key, value) {
     if (value == 1) {
      toPaste += key+',';
     }
    });
    formVarElement.val(toPaste);
   }
  }
 }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="btn1"&gt;
&lt;div class="days"&gt;
&lt;select&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Yesterday - 07.08&lt;/a&gt;&lt;/option&gt;
&lt;option value="" selected="selected"&gt;&lt;a href="#"&gt;Today - 07.08&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Tomorrov - 07.08&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Thursday - 07.08&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Friday - 07.08&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Saturday - 07.08&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Sunday - 07.08&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Monday - 07.08&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Tuesday - 07.08&lt;/a&gt;&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="btn2"&gt;
&lt;div class="menu"&gt;
&lt;h3&gt;Kdy&lt;/h3&gt;
&lt;select&gt;
&lt;option value="" selected="selected"&gt;Right know&lt;/option&gt;
&lt;option value=""&gt;All day&lt;/option&gt;
&lt;option value=""&gt;Evening&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="btn3"&gt; 
&lt;div class="menu_second"&gt;
&lt;h2&gt;Genre&lt;/h2&gt;
&lt;select&gt;
&lt;option value="" selected="selected"&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Movies&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Serial&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Sport&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Document&lt;/a&gt;&lt;/option&gt;
&lt;option value=""&gt;&lt;a href="#"&gt;Other&lt;/a&gt;&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>