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

How can I use the same javascript/jquery for multiple drop down on a single page? Would I select by ID or class?

如何在单个页面上使用相同的javascript / jquery进行多次下拉?我会按ID或班级选择吗?

These are one the same page:

这些是同一页面:

<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>

What javascript/jquery should I use to have the page redirect to the correct URL when an option is selected? Functionality should be the same for both dropdowns, but each have unique IDs. I'm not opposed to using the same class for both dropdown (instead of unique IDs) if that method would be easier.

当选择一个选项时,我应该使用什么javascript / jquery让页面重定向到正确的URL?两个下拉列表的功能应该相同,但每个都有唯一的ID。如果该方法更容易,我不反对对同时使用同一个类下拉(而不是唯一ID)。

2 个解决方案

#1

The easiest method would be to use the "onchange" event of the SELECT. You don't need to use jQuery or the "id" attribute.

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

Then create a simple javascript function to change the window's location property.

然后创建一个简单的javascript函数来更改窗口的location属性。

function launch(opt) {
    window.location = opt.value;
}

Hope that helps.

希望有所帮助。

#2

If the behavior is both the same then you can either create listeners for the individual IDs, or use the same class and add the listener to that class. To prevent duplicate code, I would suggest the class approach.

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

And then the jquery:

然后是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.
  );
});

Working jsfiddle: https://jsfiddle.net/aarbor989/y0yjouo0/

工作jsfiddle:https://jsfiddle.net/aarbor989/y0yjouo0/

#1