How to set an option selected if the item of an array is equal to the value of the option?-CodePudding

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.

CodePudding user response：

You can pass the selectedOption on click of edit button which will change the selected value in select.

$("#optionPanel").append('<div ><select id="fraction"  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>