Question

如何在单个页面上使用相同的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）。

Answer 1

如果行为相同，那么您可以为各个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/

Answer 2

最简单的方法是使用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;
}

希望有所帮助。

一页上有多个下拉菜单的Javascript / jquery

2 个答案: