我有一个看起来像这样的选项面板:
附上我的HTML代码:
HTML
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Times You Don't Want Classes</h3>
</div>
<div class="panel-body panel-options">
<div id="days" class="checkbox">
<label>
<input type="checkbox"> Mon
</label>
<label>
<input type="checkbox"> Tues
</label>
<label>
<input type="checkbox"> Wed
</label>
<label>
<input type="checkbox"> Thurs
</label>
<label>
<input type="checkbox"> Fri
</label>
</div>
<div class="btn-group">
<a id="from-text" class="btn btn-default">10:00 AM</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="from" class="dropdown-menu time-span">
// These are simply time increments from 7 AM to midnight
@foreach ($timeIncrements as $increment)
<li><a href="#">{{ $increment }}</a></li>
@endforeach
</ul>
</div>
to
<div class="btn-group">
<a id="to-text" class="btn btn-default">12:00 PM</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="to" class="dropdown-menu time-span">
@foreach ($timeIncrements as $increment)
<li><a href="#">{{ $increment }}</a></li>
@endforeach
</ul>
</div>
</div>
</div>
我想要做的是,当用户点击星期一...星期二...星期三..和从 - 到 - 时间时,为我的AJAX代码生成一个URL来查询该特定URL。
我的API看起来像以下网址:
example.org/schedulizer/schedule?from=1000&to=1200&days=MW
如您所见,from
和to
是用户不想要课程的跨度(在我们的情况下是上午10点到下午12点)
days
是他们希望跨度满足的日子(在我们的例子中是星期一和星期三)
这是我到目前为止我的JS
JS:
<script type="text/javascript">
$(function()
{
$('#from li').on('click', function(){
$('#from-text').text($(this).text());
});
$('#to li').on('click', function(){
$('#to-text').text($(this).text());
});
$(function(){
$("input[type='checkbox']").change(function(){
var item=$(this);
if(item.is(":checked"))
{
console.log($('#days').attr('value'));
}
});
});
});
</script>
我对Javascript很新,所以我很失落如何开始。如何从复选框和下拉列表中获取值并根据所选内容生成URL?