我有一个引导程序表单,我想要一些条件提取。我有一个下拉按钮,它有两个选项,如果用户选择任何选项,我想根据选择显示不同的字段。
HTML:
<h1 class="text-center">Setup a new crawler</h1>
<form role="form" id="crawler-form" class="form-horizontal" action="/launch" method="POST">
<div class="form-group">
<label class="control-label col-sm-2" for="choice" >Type of Crawling:</label>
<div class="col-sm-10">
<button id="choice" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Crawling Type <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Historical Crawling</a></li>
<li><a href="#">Real-time Crawling</a></li>
</ul>
</div>
</div>
<div class="form-group hidden">
<label class="control-label col-sm-2" for="cname">Name of Crawler:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="cname" name="name" placeholder="Enter crawler name">
</div>
</div>
<div class="form-group hidden">
<label class="control-label col-sm-2" for="comment">Crawler Description:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" id="comment"
name="description"></textarea>
</div>
</div>
<div class="form-group hidden">
<label class="control-label col-sm-2" for="keywords">Keywords:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="keywords" name="keywords" placeholder="Enter keywords">
</div>
</div>
<div class="form-group hidden">
<label class="control-label col-sm-2" for="hashtags">Hashtags:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="hashtags" name="hashtags" placeholder="Enter hashtags">
</div>
</div>
<div class="form-group hidden">
<label class="control-label col-sm-2" for="datepicker">Date:</label>
<div class="col-sm-10">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" value="2016-04-01"/>
<span class="input-group-addon glyphicon glyphicon-calendar"></span>
<span class="input-group-addon control-label">to</span>
<input type="text" class="input-sm form-control" name="end" value="2016-04-25" />
<span class="input-group-addon glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<div class="form-group hidden">
<div class="col-sm-offset-6 col-sm-10">
<button type="submit" class="btn btn-default" value="Launch" >Start Crawler</button>
</div>
</div>
</form>
使用Javascript:
// Inputs value which determines the fields to revealed
var choice = $('.dropdown-menu ul > li > a').text();
// Wrappers for the all the conditional fields
var name = $('#crawler-form input[name=name]').parent();
var description = $('#crawler-form textarea[name=description]').parent();
var keywords = $('#crawler-form input[name=keywords]').parent();
var hashtags = $('#crawler-form input[name=hashtags]').parent();
var start = $('#crawler-form input[name=start]').parent();
var end = $('#crawler-form input[name=end]').parent();
var all = name.add(description).add(keywords).add(hashtags).add(start).add(end); //shortcut for all wrapper eliments
var show-form = function(choice){
all.addClass('hidden');
if (choice == 'Historical Crawling'){
name.removeClass('hidden');
description.removeClass('hidden');
keywords.removeClass('hidden');
hashtags.removeClass('hidden');
start.removeClass('hidden');
end.removeClass('hidden');
}
else if (choice == 'Real-time Crawling'){
name.removeClass('hidden');
description.removeClass('hidden');
keywords.removeClass('hidden');
hashtags.removeClass('hidden');
}
};
$(document).ready(init);
var init = function(){
show-form();
};
有人可以帮我理解这个问题吗?代码有什么问题?我也创造了一个小提琴。 [这里](https://jsfiddle.net/amitJS/hu303g9s/) 谢谢。