Question

我想更改实际的ul li以在我的模板中选择选项。在原始脚本中我使用ul li标签，但是对于新模板，我需要将其更改为选择选项。原始代码如下所示：

＆＃13;

$('#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);
			}
		}
	}
});

＆＃13;

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

＆＃13;

这是我使用javascript的新HTML模板。我更改了ul li以在脚本中选择选项并删除了div id＆＃34; line＆＃34;在模板中。但脚本不起作用。而且我不知道为什么。如果我点击选择并选择任何选项，它将重新加载页面而不起作用。

＆＃13;

$('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);
			}
		}
	}
});

＆＃13;

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

＆＃13;

更改ul li以选择选项

0 个答案: