I have a select list (let's name it fraction select list) like this which appends by jQuery:
$("#optionPanel").append('<div class="form-group col-md-3"><select id="fraction" class="form-control" width="100%" id="navigationMethod"><option value="0.0" selected="">Nothing</option><option value="1.0">100%</option><option value="0.9">90%</option><option value="0.8333333">83.33333%</option><</select>');
when I click on a button, I can get the value of the select list and set it inside a variable.
var selectedOption : '';
$('#submitBtn').on('click',function(){
selectedOption = $('#fraction').val()
});
Now I have an edit button too, I want to do something when I clicked on the edit button, the `fraction selectlist's value be as the same as the selectedOption's variable's value and the option be selected.
As I said, my selectlist is being generated by jQuery, it's not a simple HTML selectlist so we can use selected attribute easily.
I would appreciate it if you help me with that.
Thanks.
You can pass the selectedOption on click of edit button which will change the selected value in select.
$("#optionPanel").append('<div class="form-group col-md-3"><select id="fraction" class="form-control" width="100%" id="navigationMethod"><option value="0.0" selected="">Nothing</option><option value="1.0">100%</option><option value="0.9">90%</option><option value="0.8333333">83.33333%</option><</select>');
let selectedOption = "0.9";
$('#editBtn').on('click', function () {
$("#optionPanel select").val(selectedOption);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='optionPanel'></div>
<button id="editBtn"> EDIT</button>