JQuery-当两个按钮使用一个函数以两种不同的形式出现时，通过单击按钮获得正确的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">

中二：

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

到目前为止，它的工作方式是，在FORM1中，它像应该的那样工作，但在FORM2中，它在两个选择中都重定向到/page2。

我如何在FORM 2中获得它，如果用户选择了这些选项，它也会正确重定向到/page3和/page4？

我对此是全新的，所以请随意解释我需要如何思考：(

编辑

我所理解的是，我的form-field-dynamic_select对于每个表单都应该是唯一的，因此它在var URL中应该是不同的，我已经尝试过getElementByID((，但我就是做不到。

如果需要修改脚本，我可以将第二个select 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>

Answer 2

将第二个select id重命名为其他id。你也可以试试这个

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