i wanna change actual ul li select option in template. in original script use ul li tags, new template need change select option. original code this:
$('#line li').click(function() { var parentclass = $(this).parent().attr('class'); if ($(this).index() > 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); } } } });<ul> <li ><a href="?page=homepage&day=-1">yesterday<br /><span class="date">05.04.2016</span></a></li> <li class = "active"><a href="?page=homepage&day=0">today<br /><span class="date">06.04.2016</span></a></li> <li ><a href="?page=homepage&day=1">tomorrow<br /><span class="date">07.04.2016</span></a></li> <li ><a href="?page=homepage&day=2">friday<br /><span class="date">08.04.2016</span></a></li> <li ><a href="?page=homepage&day=3">saturday<br /><span class="date">09.04.2016</span></a></li> <li ><a href="?page=homepage&day=4">sunday<br /><span class="date">10.04.2016</span></a></li> <li ><a href="?page=homepage&day=5">monday<br /><span class="date">11.04.2016</span></a></li> <li ><a href="?page=homepage&day=6">tuesday<br /><span class="date">12.04.2016</span></a></li> <li ><a href="?page=homepage&day=7">wednesday<br /><span class="date">13.04.2016</span></a></li> </ul> <div id="line"> <ul class="time"> <li class="active" data-formvar="now"><a href="#">right now</a></li> <li data-formvar="day"><a href="#">all day</a></li> <li data-formvar="evening"><a href="#">evening</a></li> </ul> <ul class="genre"> <li class="active" data-formvar=""><a href="#">all</a></li> <li data-formvar="1"><a href="#">movies</a></li> <li data-formvar="2"><a href="#">serials</a></li> <li data-formvar="3"><a href="#">news</a></li> <li data-formvar="4"><a href="#">sport</a></li> <li data-formvar="5"><a href="#">document</a></li> <li data-formvar="6"><a href="#">other</a></li> </ul> </div>this new html template javascript. changed ul li select option in script , removed div id "line" in template. script not working. , don't know why. if click on select , choose option reload page without effect.
$('select').on('change', function () { var optionselected = $("option:selected", this); var valueselected = this.value; var parentclass = $(this).parent().attr('selected','selected'); if ($(this).index() > 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); } } } });<div class="btn1"> <div class="days"> <select> <option value=""><a href="#">yesterday - 07.08</a></option> <option value="" selected="selected"><a href="#">today - 07.08</a></option> <option value=""><a href="#">tomorrov - 07.08</a></option> <option value=""><a href="#">thursday - 07.08</a></option> <option value=""><a href="#">friday - 07.08</a></option> <option value=""><a href="#">saturday - 07.08</a></option> <option value=""><a href="#">sunday - 07.08</a></option> <option value=""><a href="#">monday - 07.08</a></option> <option value=""><a href="#">tuesday - 07.08</a></option> </select> </div> </div> <div class="btn2"> <div class="menu"> <h3>kdy</h3> <select> <option value="" selected="selected">right know</option> <option value="">all day</option> <option value="">evening</option> </select> </div> </div> <div class="btn3"> <div class="menu_second"> <h2>genre</h2> <select> <option value="" selected="selected"><a href="#">all</a></option> <option value=""><a href="#">movies</a></option> <option value=""><a href="#">serial</a></option> <option value=""><a href="#">news</a></option> <option value=""><a href="#">sport</a></option> <option value=""><a href="#">document</a></option> <option value=""><a href="#">other</a></option> </select> </div> </div>
Comments
Post a Comment