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>