Jquery-如何在不使用.change()触发设置值操作的情况下为select选项下拉列表设置值

Question

所以我有一个下拉列表，它在一个表单中，如下所示：

<form id="formA" action="John/Doe" method="post">
-hidden input with value-
<select name="Letters" id="Letters">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</form>

因此，我的情况是，一旦我在下拉列表中做出选择，就会触发如下提交表单操作：

$(document).on('change', '#Letters', function() {
// here I am submitting the form whenever the ajax call success
$.ajax({
type: "Get",
url: "sample/url",
success: function(data){
console.log(data);
$('#formA').submit();
}
});
});

现在我有了另一个ajax调用，当这个ajax调用完成时，我需要为这个相同的下拉列表设置选择值，我用$('#Letters').val(newValue).change()进行了尝试，如下所示。

$.ajax({
type: "POST",
url: "sample/url",
data: {sampleData}
success: function(data){
console.log(data);
},
complete: fuinction(){
$('#Letters').val(newValue).change();
}
});

然而，这个.change()将再次触发上面的ajax调用，这不是我想要的。所以我想不能在这里使用.change()。

我这样做的原因是，我希望在下一个表单提交操作中使用此值。如果我在第二次ajax调用之后没有设置这个值，那么当我进行下一次表单提交时，我得到了null值。

我也尝试过$("#Letters option[value=" + thatOptionValue + "]").attr('selected', true)，但这一次根本没有将值设置为下拉列表。我的控制器由此变为空。

在我看来，只有当使用.change()时，它才会进行设定值操作。是否有其他解决方案可以在不使用.change()的情况下设置该值？

任何帮助都将不胜感激！

Answer 1

如果newValue表示<select>中某个<option>元素的value属性，则只需要使用$("#Letters").val(newValue)。这将在不触发更改事件的情况下选择适当的选项

$.post("sample/url", { sampleData }).done(data => {
$("#Letters").val(newValue) // whatever this is ¯_(ツ)_/¯
})

演示~https://jsfiddle.net/zfep1Lnj/

Answer 2

所以我从这篇文章中找到了答案：https://stackoverflow.com/a/13343616/6513302

因此，首先，使用.val("yourDesiredValueHere")会将选择设置为您想要的内容，但实际上并不是在不使用.change()手动触发事件的情况下为您的下一次表单提交设置该下拉列表的值。p.s.至少就我而言。

在上面的帖子中，有人有同样的场景，使用.change()会导致无限循环，因为在其他地方有一个有界的变化事件。奇怪的是，当我试图通过取消选择来做到这一点时->重新选择选项->使用.val("YourValueHere").change()设置该值，则无限循环停止发生。

所以我的最终工作解决方案：

$("#dropDownList" option).removeAttr('selected')
.filter('[value=' + YourDesiredValueVariable + ']')
.prop('selected', true);
$("#dropDownList").val(YourDesiredValueVariable).change();

使用上面的解决方案，我不会得到一个无限循环，即使我在同一个下拉列表上有另一个有界的更改事件。