如何像这样从下拉列表中选择并反映 url sample.com/past_questions/chemistry/?exam_div=gce&exam_year=2018

Question

<div class="row" style="margin-bottom:40px">
<div class="col-xs-12 col-sm-6">
<p><strong><label> Examination Division</strong></label>
</p>
<div>
<select type="text" name="exam_div" onchange="location = this.options[this.selectedIndex].value;" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:16px;">
<option value selected>Select exam division </option>
<option value="https://sample.com/past-questions/chemistry/?&amp;exam_div=jamb">JAMB</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=gce"> GCE</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=alevel">A LEVEL</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<p><strong><label>Examination Year</strong></label>
</p>
<div>
<select type="text" name="exam_div" onchange="location = this.options[this.selectedIndex].value;" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:15.5px;">
<option value selected>Select an exam year</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2018">2018</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2017">2017</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2016">2016</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2015">2015</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2014">2014</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2013">2013</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2012">2012</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2011">2011</option>
</select>
</div>

Answer 1

将

两个下拉菜单合并为一个包含分区和年份的 URL

保持简单：

• 仅将div/year 值放在选项值上，而不是整个 URL 上
• 使用data-将基本网址添加到可查找的位置
• 使用 jQuery 添加事件，而不是onclick=
• 在两个选择上使用.on("change"...，并检查是否已输入两个值
• 将所有 3 个(URL + 2x 值(合并为一个 URL 并重定向(下面注释掉(

$(".selection select").on("change", function() {
var division = $("#exam_div").val();
var year = $("#exam_year").val();
if (division === "" || year === "")
return;
var url = $(".selection").data("url") + "?exam_div=" + division + "&exam_year=" + year;
//location.href = url;
console.log(url);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='selection' data-url='https://sample.com/past-questions/chemistry'>
<div>
<p><strong>Examination Division</strong></p>
<div>
<select name="exam_div" id="exam_div">
<option value selected>Select exam division </option>
<option value="jamb">JAMB</option>
<option value="gce"> GCE</option>
<option value="alevel">A LEVEL</option>
</select>
</div>
</div>
<div>
<p><strong>Examination Year</strong>
</p>
<div>
<select name="exam_year" id="exam_year">
<option value selected>Select an exam year</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
</div>
</div>
</div>

从 UX 的角度来看，单击"GO"按钮会更好，而不是在更改时选择，并且在使用键盘更改选择选项时触发更改事件。

Answer 2

<select type="text" name="exam_div" id="examdiv" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:15.5px;">
<option value selected>Select an exam year</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2018">2018</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2017">2017</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2016">2016</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2015">2015</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2014">2014</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2013">2013</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2012">2012</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2011">2011</option>
</select>

使用 jquery 试试这个

$(document).on('click', '#examdiv', function(){ 
window.location.replace($('this').val());   
});