Jquery - how to the set value for select option dropdown without using .change() to trigger the set-CodePudding

So I have a dropdown which is within a form just like below:

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

So my situation is once I make a selection on the dropdown, it will trigger a submit form action like below:

$(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();
        }
    });
});

Now I have another ajax call, when this ajax call is completed, I need to set the select value for this same dropdown list, I tried it with $('#Letters').val(newValue).change() just like below.

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

However, this .change() will trigger the ajax call above again which is not something that I want. So I guess cannot use .change() here.

The reason I am doing this is that I wanted this value for the next form submit action. If I don't set this value after this 2nd ajax call, when I do next form submit, I got null values.

I also tried $("#Letters option[value=" thatOptionValue "]").attr('selected', true) But this one is not setting the value to the dropdown list at all. My controller is getting null from this.

It seems to me only when using .change() then it will do the set value operation. Is there any other solution to set the value without using .change()?

Any help will be appreciated!

CodePudding user response：

Provided the newValue represents a value attribute of one of your <option> elements in your <select>, all you need to use is $("#Letters").val(newValue). This will select the appropriate option without triggering the change event

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

Demo ~ https://jsfiddle.net/zfep1Lnj/

CodePudding user response：

So I found an answer from this post: https://stackoverflow.com/a/13343616/6513302

So first of all, using .val("yourDesiredValueHere") is going to set the selection to what you want, but it is not actually setting the value to this dropdown list for your next form submission without using .change() to manually trigger the event. p.s. At least, in my case.

In the post above, there is someone having the same scenario that using .change() is causing an infinite loop because there is a bounded change event somewhere else. The weird thing is when I tried to do that by deselecting the selection -> reselect the option -> set the value using .val("YourValueHere").change(), the infinite loop stopped happening.

So my final working solution:

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

$("#dropDownList").val(YourDesiredValueVariable).change();

using the above solution, I am not getting an infinite loop even I have another bounded on change event on the same dropdown list.