如何在单个页面上使用相同的javascript / jquery进行多次下拉?我会按ID或班级选择吗?
这些是同一页:
<select id="drop1">
<option value="#">Option 1</option>
<option value="#">Option 2</option>
<option value="#">Option 3</option>
</select>
<select id="drop2">
<option value="#">Option 1</option>
<option value="#">Option 2</option>
<option value="#">Option 3</option>
</select>
当选择一个选项时,我应该使用什么javascript / jquery让页面重定向到正确的URL?两个下拉列表的功能应该相同,但每个都有唯一的ID。如果该方法更容易,我并不反对在同一个下拉列表中使用相同的类(而不是唯一的ID)。
答案 0 :(得分:0)
如果行为相同,那么您可以为各个ID创建侦听器,也可以使用相同的类并将侦听器添加到该类。为了防止重复代码,我建议使用类方法。
<select id="drop1" class="urlRedirect">
<option selected disabled>--Select--</option>
<option value="page1">Option 1</option>
<option value="page2">Option 2</option>
<option value="page3">Option 3</option>
</select>
<select id="drop2" class="urlRedirect">
<option selected disabled>--Select--</option>
<option value="page4">Option 1</option>
<option value="page5">Option 2</option>
<option value="page6">Option 3</option>
</select>
然后是jquery:
$('select.urlRedirect').change(function() {
//alert($(this).val());
//window.location.href=$(this).val(); to open in same page
window.open(
$(this).val(),
'_blank' // <- This is what makes it open in a new window.
);
});
工作jsfiddle:https://jsfiddle.net/aarbor989/y0yjouo0/
答案 1 :(得分:0)
最简单的方法是使用SELECT的“onchange”事件。您不需要使用jQuery或“id”属性。
<select id="drop1" onchange="launch(this)">
<option value="/drop1opt1.html">Option 1</option>
<option value="/drop1opt2.html">Option 2</option>
<option value="/drop1opt3.html">Option 3</option>
</select>
<select id="drop2" onchange="launch(this)">
<option value="/drop2opt1.html">Option 1</option>
<option value="/drop2opt2.html">Option 2</option>
<option value="/drop2opt3.html">Option 3</option>
</select>
然后创建一个简单的javascript函数来更改窗口的位置属性。
function launch(opt) {
window.location = opt.value;
}
希望有所帮助。