JQuery - 当两个按钮使用 ONE 函数处于两种不同的形式时，通过单击按钮获取正确的 SELECTED 值

Question

我删除了昨天的最后一个问题，我已阅读以了解要问什么。所以我又来了:
我试图让我的脚本根据单击的按钮从选择中获取正确的值。
我有以下小重定向脚本:

  (function($){
      // bind change event to select
      $("#button1,#button2").on('click', function () {
          var url =  $("#form-field-dynamic_select :selected").val();// get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
  })(jQuery);

我有这个 html:
表格 1:

<select name="form_fields[dynamic_select]" id="form-field-dynamic_select" class="elementor-class">
<option value="https://www.example.com/page1">Example 1</option>
<option value="https://www.example.com/page2">Example 2</option>
</select>
<button type="submit" class="elementor-button" id="button1">

表格 2:

<select name="form_fields[dynamic_select]" id="form-field-dynamic_select" class="elementor-class">
<option value="https://www.example.com/page3">Example 3</option>
<option value="https://www.example.com/page4">Example 4</option>
</select>
<button type="submit" class="elementor-button" id="button2">

到目前为止，它的工作方式是在 FORM 1 中 - 它的工作原理应该如此，但在 FORM 2 中 - 它在两个选择中都重定向到/page2 。
我怎样才能在 FORM 2 上得到它，如果用户选择了这些选择，它也会正确重定向到/page3 和/page4？
我对此很陌生，所以请随时解释我需要如何思考:)
编辑
我所理解的是，我的 form-field-dynamic_select 应该对每个表单都是唯一的，因此它在 var URL 中应该是不同的，我已经使用过 getElementByID()，但我就是无法做到这一点。
如果需要修改脚本，我可以将第二个选择 ID 重命名为其他名称。

Answer 1

您可以简单地使用 .closest("form")获取单击按钮的表单，然后使用 .find() & .val()获取选择框值。
演示代码 :

(function($) {
  $("#button1,#button2").on('click', function() {
    //use `this` (current button refernce) get form then slect value 
    var url = $(this).closest("form").find("select").val();
    if (url) {
      //window.location = url; // redirect
      console.log(url)
    }
    return false;
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
FORM 1:
<form>
  <select name="form_fields[dynamic_select]" class="elementor-class">
    <option value="https://www.example.com/page1">Example 1</option>
    <option value="https://www.example.com/page2">Example 2</option>
  </select>
  <button type="submit" class="elementor-button" id="button1">Click1</button>
</form>
FORM 2:
<form>
  <select name="form_fields[dynamic_select]" class="elementor-class">
    <option value="https://www.example.com/page3">Example 3</option>
    <option value="https://www.example.com/page4">Example 4</option>
  </select>
  <button type="submit" class="elementor-button" id="button2">Click2</button>
</form>